Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Seletor (tio) ~ em CSS

Olá, não compreendi muito bem como foi passado na aula, não consegui replicar. Em um dos fóruns mencionaram isso: "O seletor (tio) ~ é usado para pegar todos os irmãos". Tentei aplicar no código abaixo:

<div>
</div>
<section>
    <p> Parágrafo da section </p>
</section>
<section>
    <p> Parágrafo da segunda section</p>
</section>
<p>Este é um paragrafo</p>
<p>Este é outro paragrafo</p>
<div>
  <p>Este é outro paragrafo</p>
</div>

Coloquei no CSS:

div ~ p {font-size: 50px;}  

E localizou:

<p>Este é um paragrafo</p>
<p>Este é outro paragrafo</p>

Mas porque quando eu coloco div ~ section não localiza a section como uma irmão da div, assim como fez com o p?? Eu entendi errado como se usa o seletor ~?

2 respostas
solução!

Oi, Amanda, tudo bem?

O seletor (tio), em sua estrutura temos dois elementos elemento1 ~ elemento2que correspondem às ocorrências do elemento2 que são precedidas por elemento1.

E ambos os elementos devem ter o mesmo pai mas o elemento2 não precisa ser imediatamente precedido por elemento1. Esta propriedade funciona se ambos os elementos tiverem um elemento pai comum.

Fiz o seguinte teste com o seu código:

    <style>
       div ~p{
            background-color: lightgreen;
        }

        div ~section{
            background-color: tomato;
        }
    </style>

E a section teve o estilo adicionado como esperado

imagem de referência da questão acima

Como você tentou fazer para aplicar estilo à div ~ section ?

Oiii! consegui ontem a noite, estava fazendo em outro código e havia uma sobreposição no p, que era mais específico que a nossa section com tio, por isso não havia dado certo. E a diferença para os outros seletores, é que > seleciona o filho, + seleciona 1 irmão, e o ~ seleciona todos os irmãos. obrigadaa