Seletores avançados do CSS

Para que servem os seletores "~", "+", e ">"

O seletor ”~”

No css, serve para selecionar elementos depois de outros elementos, podemos traduzir o ~ para: “quero pegar todos elementos depois desse elemento” por exemplo, temos a seguinte marcação HTML:

<ul>
  <li>Primeiro Item</li>
  <li>Segundo Item</li>
  <li>Terceiro Item</li>
  <li>Quarto Item</li>
</ul>

Queremos que a partir do segundo item, ele e todos os outros li's tenham uma margin-top de 10px. Poderiamos fazer da seguinte maneira:

li ~ li {
  margin-top: 10px;
}

Dessa forma, o primeiro elemento não teria o margin-top, mas o segundo e todos os outros possuiriam essa propriedade.

Outra forma de ler esse seletor: “Quero pegar todos li's que tenha outro li antes dele”, que no nosso caso, não pegaria o primeiro li, pois não há nenhum li que o precede.

Lembre-se bem, o ”~” seleciona TODOS os elementos depois de outro.

Agora, um outro caso, temos o seguinte HTML:

<img src="imagem.jpg" />
<div>
  <p>
    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor
    sit amet.
  </p>
</div>

E queremos pegar todos os paragrafos depois da imagem. Poderíamos selecioná-lo da seguinte maneira?

img ~ p

O nosso seletor de ”~” iria funcionar nesse caso? A resposta é: não, esse seletor não iria funcionar, pois quem está depois da imagem é a div e dentro da div é que estão os paragrafos, nosso seletor ”~” funciona apenas para selecionar elementos irmãos, e não elementos filhos…

O seletor ”+”

No css, temos o seletor ”+” que nos permite selecionar um elemento IMEDIATAMENTE depois de outro elemento, por exemplo, temos o seguinte HTML:

<img src="imagem.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>
  Temporibus, incidunt. Lorem ipsum dolor sit amet, consectetur adipisicing
  elit.
</p>
<p>
  Possimus, blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing
  elit.
</p>
<p>Fugiat, pariatur?</p>

Queremos que apenas o primeiro paragrafo seja em negrito. Podemos então selecioná-lo da seguinte maneira:

img + p {
  font-weight: bold;
}

Lembre-se, o ”+” pega o elemento IMEDIATAMENTE após, então, ele não funcionaria em um caso como esse, onde queremos selecionar o primeiro paragrafo após a imagem:

<img sc="imagem.jpg" />
<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet,
    consectetur.
  </p>
</div>

O seletor ”>”

Esse seletor nos permite selecionar elementos PAI e FILHOS, não seleciona elementos netos, apenas elementos filhos, por exemplo, temos o seguinte HTML:

<div>
  <p>Lorem ipsum.</p>
  <!-- filho de div -->

  <blockquote>
    <p>Lorem ipsum.</p>
    <!-- neto de div -->
  </blockquote>

  <p>Lorem ipsum.</p>
  <!-- filho de div -->
</div>

Queremos pegar os p que são filhos da div, e não netos, como é o caso do p que está dentro do blockquote. Para pegar esses paragrafos que são filhos da div e aplicarmos um estilo de text-decoration: underline;, podemos selecioná-los da seguinte forma:

div > p {
  text-decoration: underline;
}

Dessa maneira, todos os p que são filhos da div receberão o estilo.

Conclusão

Os seletores de elementos que vimos hoje nos dão bastante poder, pois podemos combiná-los para pegar elementos específicos, como por exemplo, .noticias > h1 + p esse seletor seleciona exatamente todos os paragrafos que estão imediatamente depois de todos os h1, que são filhos de .noticias. Bastante útil quando não podemos alterar nada no HTML ou temos acesso apenas aos arquivos de CSS.

Porém, sua compreensão é bastante difícil, não conseguimos bater o olho nesse seletor e já saber o que ele está selecionando. Outro ponto negativo é a sua performance, o navegador lê os elementos selecionados da direita para esquerda, então ele teria um trabalho relativamente grande para capturar esses elementos, pois teria que achar todos os p da página, depois selecionar apenas os que estão imediatamente depois de um h1 e ainda selecionar todos os h1, mas, pegar apenas os que são filhos de .noticias, ou seja, muito custoso para o navegador.

Mas o ponto que mais me incomoda, é que caso esse h1 venha a ser h2, nosso código CSS não funcionará mais. Nosso CSS é dependente da estrutura atual do HTML, caso ela mude, nosso CSS quebra.

Então, use com cuidado!