Combinadores CSS

Você já sabe mirar elementos com seletores de tipo, class e id. A próxima habilidade: estilizar um elemento porque ele está em certo lugar em relação a outro — dentro de uma seção, só como filho direto, ou logo após um título.

O que são combinadores CSS?

Um combinador CSS é um símbolo (ou um espaço) colocado entre dois seletores. Ele diz ao navegador como essas duas partes devem se relacionar na árvore HTML. O lado esquerdo é a referência; o direito é o que recebe os estilos.

Quatro combinadores em um relance

Aprenda primeiro os símbolos; depois pratique cada um com um exemplo curto.

Combinador descendente (espaço)

Um espaço entre seletores significa: «corresponda o segundo seletor em qualquer lugar dentro do primeiro». A profundidade não importa — netos e níveis mais profundos também correspondem.

Quando descendentes ajudam

Use o combinador descendente para aparência compartilhada numa região: todos os parágrafos de um article, todos os links de um nav. Se quiser só filhos diretos e as correspondências profundas forem largas demais, mude para o combinador filho.

Combinador filho (>)

O > corresponde apenas a filhos diretos. Um elemento aninhado mais fundo não corresponde.

Espaço vs > numa imagem

Se o HTML for <ul class="menu"><li>One<ul><li>Nested</li></ul></li></ul>, então .menu > li estiliza só o li externo. Um descendente .menu li estiliza o externo e o aninhado.

Combinador irmão adjacente (+)

O + corresponde ao elemento que vem imediatamente depois da referência irmã — mesmo pai, porta ao lado, sem outro elemento no meio.

Um padrão comum

Muitos layouts querem que o primeiro parágrafo após um título pareça um pouco diferente (texto de abertura). h2 + p mira esse vizinho sem dar class a cada parágrafo.

Combinador irmão geral (~)

O ~ corresponde a cada irmão posterior que combine com o segundo seletor — não só o próximo imediato. Ainda precisam compartilhar o mesmo pai.

+ vs ~

• h2 + p — só o parágrafo logo após o h2
• h2 ~ p — cada p irmão que seguir esse h2 (primeiro, segundo, terceiro…)
  Se um div ficar entre h2 e um p, h2 + p falha para esse p, mas h2 ~ p ainda pode corresponder a parágrafos irmãos posteriores.

Escolher um combinador

• Prefira descendente para «tudo deste tipo nesta região»
• Prefira filho quando o aninhamento estilizaria listas ou widgets que você não quis
• Prefira irmão adjacente para um padrão de vizinho em um passo (título → primeiro parágrafo)
• Prefira irmão geral quando vários pares após um marcador devem compartilhar aparência
  Mantenha cadeias curtas enquanto aprende. Cadeias longas são poderosas — e fáceis de quebrar se o HTML mudar.

Experimente você mesmo

1. Monte uma página curta com um <article> contendo <h2>, um <p>, um <div> com outro <p> dentro e depois mais um <p> após o div.
2. Adicione article p { color: #334155; } e confirme que ambos os parágrafos do artigo mudam (descendente).
3. Mude para article > p { color: #0f766e; } e atualize — só parágrafos filhos diretos devem manter essa cor; o p aninhado no div, não.
4. Adicione h2 + p { font-weight: bold; } e confirme que só o parágrafo imediatamente após o título fica em negrito.
5. Opcional: teste h2 ~ p { max-width: 36rem; } e veja que cada parágrafo irmão após o título recebe o max-width.

Erros comuns

• Usar descendente quando queria filho — widgets aninhados herdam estilos pensados só para o nível superior
• Esperar que h2 + p pule um elemento entre o título e o parágrafo — adjacente significa imediato
• Ler o combinador ao contrário — os estilos vão para o seletor da direita, não a referência esquerda
• Colocar vírgula onde queria combinador (h2, p agrupa; não significa «p após h2»)
• Assumir que ~ exige vizinhos colados — irmão geral só pede «irmão posterior»

Resumo

• Combinadores unem seletores por relação HTML: dentro, filho direto, próximo irmão ou irmãos posteriores
• Espaço = descendente (qualquer profundidade); > = só filho direto
• + = próximo irmão imediato; ~ = qualquer irmão posterior correspondente
• Os estilos aplicam-se ao seletor à direita do combinador
• Escolha o combinador mais apertado que ainda expresse sua intenção
• Pratique trocando espaço por > e comparando + com ~ na mesma página