Seletor de Irmão Geral em CSS
O seletor de irmão geral ~ permite selecionar
todos os elementos que estão após um determinado
elemento dentro do mesmo pai.
Sintaxe
seletor1 ~ seletor2 {
}
Exemplo
Vamos direcionar todas as tags p
que estão após as tags h2 e colorir
elas de vermelho:
<div>
<h2>texto</h2>
<p>
+
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
h2 ~ p {
color: red;
}
:
Exemplo
Vamos direcionar todas as tags p
que estão após os elementos com a classe .test
e colorir elas de vermelho:
<div>
<p class="test">
texto
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
.test ~ p {
color: red;
}
:
Exemplo
Vamos direcionar todos os elementos com a classe
.elem que estão após os elementos
com a classe .test e colorir eles de vermelho:
<div>
<p class="test">
texto
</p>
<p class="elem">
+
</p>
<p>
-
</p>
<p class="elem">
+
</p>
</div>
<p>
-
</p>
.test ~ .elem {
color: red;
}
:
Veja também
-
Seletor Filho,
que permite selecionar elementos por aninhamento direto -
Seletor Descendente,
que permite selecionar um elemento pelo seu pai -
Seletor de Irmão Adjacente,
que permite selecionar um elemento pelo seu vizinho -
Seletor Universal,
que permite selecionar todos os elementos
