O combinador irmão adjacente em CSS não é um seletor por si só, mas uma maneira de combinar dois seletores. Por exemplo:
p + p ( margin: 0; )O sinal de mais (+) é o combinador irmão adjacente, entre dois seletores de tag de parágrafo (elemento). Isso significa “selecione qualquer tag de parágrafo que esteja diretamente após outra tag de parágrafo (sem nada no meio)”. Aqui estão alguns exemplos do que ele selecionaria:
I'm a paragraph
I get selected!
I'm a paragraph
Monkey hair
I will NOT get selected
Isso é útil principalmente ao usar marcação semântica e precisar ajustar para determinados cenários nos quais os elementos estão diretamente próximos uns dos outros.
Veja o Seletor Pen Adjacent Sibling de Sara Cope (@saracope) no CodePen.
Mais recursos
- Um bom uso para Combinadores Irmãos Adjacentes
- MDN Docs
- W3C Spec
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nenhum | Nenhum | Nenhum | Nenhum | 7 + | Nenhum | Nenhum |