Combinadores: Descendente, Filho, Irmão

Combinadores são os sinais entre seletores. Eles dizem "esse elemento aqui, em relação a aquele outro elemento lá". Com eles, você evita colocar classe em tudo.

1. Descendente (espaço): "dentro de, em qualquer profundidade"

article p {
  color: #333;
}

Atinge todo <p> que está dentro de um <article>, em qualquer nível:

<article>
  <p>Atinge</p>
  <div>
    <p>Atinge também - está dentro do article, em qualquer profundidade</p>
  </div>
  <section>
    <p>Atinge também - três níveis abaixo</p>
  </section>
</article>

<aside>
  <p>NÃO atinge - está fora do article</p>
</aside>

É o combinador mais usado. Mas pode ser largo demais - todo <p> do site, se o site inteiro é um <article>.

2. Filho direto (>): "filho de primeira geração"

article > p {
  font-weight: bold;
}

Atinge só os <p> que são filhos diretos do <article>. Os <p> aninhados dentro de outras tags são ignorados:

<article>
  <p>Atinge - filho direto</p>
  <div>
    <p>NÃO atinge - neto, não filho</p>
  </div>
</article>

Bom para layouts onde a hierarquia importa. Ex: "só o menu principal, não os submenus".

3. Irmão adjacente (+): "o próximo irmão"

h1 + p {
  font-size: 1.2em;
}

Atinge o <p> que vem imediatamente depois de um <h1>. Só esse, só o primeiro. Clássico para dar destaque ao parágrafo que vem logo após um título.

<h1>Título</h1>
<p>Atinge - é o próximo irmão</p>
<p>Não atinge - é o segundo irmão</p>

4. Irmão geral (~): "qualquer irmão depois"

h1 ~ p {
  color: #666;
}

Atinge todos os <p> que vêm depois de um <h1>, no mesmo nível. Diferente do +, não precisa ser o próximo imediato.

<h1>Título</h1>
<p>Atinge</p>
<p>Atinge</p>
<div>
  <p>Não atinge - está dentro de outro pai</p>
</div>
<p>Atinge - voltou pro mesmo nível</p>

Tabela resumo

Quando usar cada um na vida real

• Descendente ( ): "todo parágrafo dentro de um post". Use quando a estrutura HTML é estável e conhecida.
• Filho (>): "só o menu principal, não os submenus". Ótimo para layouts.
• Irmão adjacente (+): "destaque no parágrafo que vem logo após um título". Comum para legendas, notas, primeiros parágrafos.
• Irmão geral (~): "todo checkbox marcado ativa todas as labels irmãs depois" (input:checked ~ label). Padrão clássico de "switch" e accordion em CSS puro.

Exemplo prático: tooltip em CSS puro

<p>
  CSS é <span class="dica">incrível<span class="popup">brincadeira, é divertido</span></span>!
</p>

.dica { position: relative; }
.popup {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
}
.dica:hover .popup { display: block; }

Aqui o .popup é descendente do .dica, e o :hover no pai ativa o filho. Viu? Combinadores são a cola que mantém o CSS organizado.

• Descendente (espaço): o mais comum, "tudo dentro de".
• Filho (>): só direto, ignora netos.
• Irmão adjacente (+): só o próximo.
• Irmão geral (~): todos os próximos no mesmo nível.

Dica: seletores muito aninhados (.a .b .c .d .e) são específicos demais e frágeis. Se você precisa de três níveis de combinador para "achar" um elemento, vale repensar a estrutura HTML ou adicionar uma classe.

No próximo nó, vamos falar de pseudo-elementos - o "truque" que permite colocar conteúdo extra na página sem mexer no HTML.