Seletor de Primo Adjacente do CSS

O seletor de irmãos adjacentes (Adjacent Sibling Selector) pode escolher um elemento que aparece imediatamente após outro, e ambos têm o mesmo pai.

Escolher irmãos adjacentes

Se precisar escolher um elemento que aparece imediatamente após outro e que ambos têm o mesmo pai, pode-se usar o seletor de irmãos adjacentes (Adjacent Sibling Selector).

Por exemplo, para aumentar o margem superior do parágrafo que aparece imediatamente após o elemento h1, pode-se escrever assim:

h1 + p {margin-top:50px;}

Este seletor pode ser lido assim: 'Selecione o parágrafo que aparece imediatamente após o elemento h1, onde h1 e p compartilham o mesmo pai'.

Experimente você mesmo

Explicação da Sintaxe

O seletor de irmãos adjacentes usa o sinal de mais (+), ou seja, o conectivo de irmãos adjacentes (Adjacent Sibling Combinator).

Notas:Como os conectores de filhos, os conectores de irmãos adjacentes podem ter espaços em branco.

Veja a seguir este fragmento da árvore do documento:

<div>
  <ul>
    <li>Item da lista 1</li>
    <li>Item da lista 2</li>
    <li>Item da lista 3</li>
  </ul>
  <ol>
    <li>Item da lista 1</li>
    <li>Item da lista 2</li>
    <li>Item da lista 3</li>
  </ol>
</div>

No fragmento acima, o elemento div contém duas listas: uma lista não ordenada e uma lista ordenada, cada uma contendo três itens de lista. Essas duas listas são irmãos adjacentes, e os itens de lista também são irmãos adjacentes. No entanto, os itens de lista da primeira lista não são irmãos adjacentes com os itens de lista da segunda lista, porque esses conjuntos de itens de lista não pertencem ao mesmo elemento pai (no máximo, podem ser primos).

Lembre-se de que um operador de irmão pode escolher apenas o segundo elemento entre dois irmãos adjacentes. Veja o seletor a seguir:

li + li {font-weight:bold;}

Este seletor só tornará os itens dois e três da lista em negrito. O primeiro item não será afetado.

Experimente você mesmo

Combinação com outros seletores

O operador de primitivo de irmão pode ser combinado com outros operadores:

html > body table + ul {margin-top:20px;}

Este seletor é explicado como: selecione todos os elementos ul que aparecem imediatamente após o elemento table, que está contido dentro de um elemento body, e o elemento body é um filho do elemento html.