Seletor de Irmãos Geral em CSS
O seletor de irmãos geral ~ permite selecionar
todos os elementos que estão após um determinado
elemento dentro do mesmo pai.
Exemplo
Vamos direcionar todas as tags p
que estão após as tags h2 e colorir
elas em 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 em 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 em vermelho:
<div>
<p class="test">
texto
</p>
<p class="elem">
+++
</p>
<p>
---
</p>
<p class="elem">
+++
</p>
</div>
<p>
---
</p>
.test ~ .elem {
color: red;
}
:
Tarefas Práticas
Dado o código:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li id="elem">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
Escreva um seletor que selecionará todos os elementos
que estão após o elemento #elem.