Um conceito que me deixa confuso ao se falar em HTML é o de adjacência, e de nós irmãos.
Qual a diferença de irmãos e irmãos adjacentes ?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeUm conceito que me deixa confuso ao se falar em HTML é o de adjacência, e de nós irmãos.
Qual a diferença de irmãos e irmãos adjacentes ?
Irmãos são elementos que estão no mesmo nível da árvore do DOM:
<div>div1</div>
<div>div2</div>
<p>p1</p>
div1
, div2
e p1
são elementos irmãos, pois estão no mesmo nível.
Irmão adjacente (no singular, pois é apenas um) é o elemento que está logo após. No exemplo acima, a div2
é irmã adjacente da div1
, e o p1
é irmão adjacente da div2
.
Segundo a definição do termo adjacente:
Adjacente é um adjetivo que qualifica algo que está ao lado de, ou seja, junto ou próximo de determinada coisa.
No caso do CSS, é algo que vem LOGO após, até porque o termo Cascading Style Sheets (folhas de estilo em cascata) sugere elementos sempre abaixo na árvore, como uma cascata que sempre vai pra baixo. Você não consegue selecionar elementos superiores ou anteriores na árvore (exceto com JavaScript).
Outro exemplo:
<div id="pai">
<div>div1</div>
<div>div2</div>
</div>
<p>p1</p>
Os elementos div1
e div2
são irmãos, pois estão no mesmo nível dentro da div pai
. Já o p1
agora é irmão da div pai
, e p1
é irmão adjacente da div pai
porque vem logo em seguida e está no mesmo nível na árvore.
No CSS você seleciona os irmãos com o sinal ~
entre os elementos e os adjacentes com +
.
Selecionar todos os irmãos de #div1
e coloca a cor vermelha:
#div1 ~ *{
color: red;
}
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<p>p1</p>
Seleciona o irmão adjacente da #div1
e coloca a cor vermelha:
#div1 + *{
color: red;
}
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<p>p1</p>