Seletores

No Laboratório Belavista você pinta só o trecho certo do cartaz. O seletor é o endereço: ele aponta o elemento; a declaração diz o que muda.

O exemplo deste capítulo é 22-seletores, no pacote que acompanha o volume. Mude um seletor (por exemplo de classe para tipo), preveja quem fica vermelho, recarregue e confira.

O que você vai aprender

• Ler as partes de uma regra CSS.
• Usar seletores simples: universal, tipo, classe, id, atributo.
• Agrupar seletores e combinar com combinadores.
• Preferir classe a id para estilo reutilizável.
• Evitar seletores frágeis demais para o HTML do ateliê.

Anatomia da regra

Uma regra tem seletor(es) e bloco de declarações. Cada declaração é propriedade + valor.

.cartaz-titulo {
  color: #8b1e1e;
  font-size: 1.5rem;
}

O seletor .cartaz-titulo encontra elementos com essa classe. As duas declarações formam o bloco.

Seletores simples

• * — universal (quase tudo).
• p — tipo (todas as tags p).
• .destaque — classe.
• #capa — id (um por página).
• [type="email"] — atributo.

<article class="folha">
  <p class="destaque">Primeiro parágrafo do manifesto.</p>
  <p>Segundo parágrafo, tom normal.</p>
</article>

.folha .destaque {
  color: #8b1e1e;
  font-size: 1.25rem;
}

.folha p {
  line-height: 1.5;
}

Agrupar e combinar

Vírgula agrupa: h1, h2, h3 { font-family: Georgia, serif; }.

Combinadores:

• (espaço) — descendente.
• > — filho direto.
• + — irmão adjacente.
• ~ — irmãos gerais seguintes.

nav a {
  text-decoration: none;
}

header > h1 {
  margin-block-start: 0;
}

h1 + p {
  font-weight: 600;
}

Pseudo e composto (visão rápida)

Pseudo-classes (:hover, :first-of-type) e pseudo-elementos (::before) entram com mais fôlego nos capítulos 35 e 36. Aqui, o essencial: article p:first-of-type pega só o primeiro p de cada artigo.

Seletor composto junta condições no mesmo elemento: a.botao[href^="https"].

Erro comum: estilizar com #id para tudo. Id pesa na especificidade e trava o reuso. Prefira classe no CSS do Belavista.

Critério para avançar

Você avança se: explica seletor versus declaração; pinta só o primeiro parágrafo do manifesto com um seletor; sabe a diferença entre espaço e >.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Escreva um seletor que pinte de azul só o primeiro p dentro de article.
2. Qual a diferença entre .menu a e .menu > a?
3. Por que classe costuma ser melhor que id para estilo?

Respostas comentadas

1. article p:first-of-type { color: blue; } (ou article > p:first-of-type se for filho direto).
2. Espaço pega qualquer a descendente. > pega só a filho imediato de .menu.
3. Classe reutiliza, combina e pesa menos na especificidade. Id é único e “ganha” de classes com facilidade demais.