18

Seletor +

Pega o primeiro elemento encontrado após sua declaração.

div + p {
  font-size: 20px;
}
<div>
</div>
<p>Este é um paragrafo</p>
<p>Este é outro paragrafo</p>

Seletor ~

Adiciona estilo a todos os elementos encontrados após a sua declaração, e não são descentes de de outro elemento(filhos).

div ~ p {
  font-size: 20px;
}
<div>
</div>
<p>Este é um paragrafo</p>
<p>Este é outro paragrafo</p>
<div>
  <p>Este é outro paragrafo</p>
</div>

Seletor >

Todos os elementos que sejam filhos de outro elemento.

div > p {
   font-size: 20px;
 }
<div>
  <p>Este é um paragrafo</p>
  <p>Este é outro paragrafo</p>
 </div>
<p>Este é outro paragrafo</p>

Minhas dúvidas:

  • Meu entendimento está nas citações, estou falando alguma bobagem?
  • O que ainda dá pra extrair desses seletores?
  • Existe diferença de usar div p {} em vez de div > p?

Obs: Se tiver algo a implementar ficaria muito grato.

6

1 Resposta 1

17
+50

Existe diferença de usar div p em vez de div > p?

Sim, existe. O seletor div p atinge todos os elementos p que se encontram dentro de um elemento div, mas isso não se aplica apenas a filhos diretos. Qualquer elemento p que estiver dentro de div será atingido. Por sua vez, o seletor div > p apenas atinge os elementos p que possuem como elemento pai um elemento div.

Veja o exemplo abaixo. Ao fazer div p { color: red; } estou dizendo que todos os elementos p dentro de um div devem possuir a cor de fonte vermelha. Porém, fazendo div > p { color: green; } eu digo que aqueles que possuírem como elemento pai o div devem possuir a cor de fonte verde. Desta forma, o primeiro parágrafo ficará com a cor de fonte verde, enquanto o segundo ficará com a cor de fonte vermelha.

div p { color: red; }
div > p { color: green; }
<div>
  <p>Primeiro parágrafo</p>
  <footer>
    <p>Segundo parágrafo</p>
  </footer>
</div>

Podemos definir, então:

  • div p atinge todos os elementos p DENTRO de um div;
  • div > p atinge todos os elementos p cujo ELEMENTO PAI é um div.

O que ainda dá pra extrair desses seletores?

O seletor div + p, por sua vez, atingirá todos os elementos p que são definidos IMEDIATAMENTE após um elemento div. Ao utilizá-lo com elementos li, por exemplo, atingirá todos os elementos, exceto o primeiro. Muito útil para definir uma borda interna que separa os elementos.

li + li { border-top: 1px solid black; }
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

O seletor div ~ p, por sua vez, atinge todos os elementos p que são precedidos por um elemento div, mas não necessariamente de forma imediata. Ou seja, ambos os elementos devem possuir o mesmo elemento pai, mas o elemento p não precisa suceder div imediatamente.

Perceba que o seletor div + p, embora atinja o elemento p que é definido imediatamente após div, irá atingir TODOS os elementos p que satisfazerem esta condição. Perceba no exemplo abaixo onde existem dois elementos h2 que são definidos imediatamente após h1 e ambos são estilizados com a cor verde.

h1 ~ h2 { color: red; background: cyan; }
h1 + h2 { color: green; }
<h1>Título 1.1<h1>
<h2>Título 2.1</h2>

<p>Qualquer texto aqui...</p>

<h2>Título 2.2</h2>

<h1>Título 1.2<h1>
<h2>Título 2.1</h2>

<p>Qualquer texto aqui...</p>

<h2>Título 2.2</h2>

Podemos, então, definir:

  • O seletor div + p atinge todos os elementos p que sucedem IMEDIATAMENTE um elemento div;
  • Enquanto o seletor div ~ p atinge todos os elementos p que são PRECEDIDOS, não necessariamente de forma imediata, por um elemento div;

Meu entendimento está nas partes amarelas, estou falando alguma bobagem?

De forma simplificada, estão corretas. Só alguns termos que poderiam ser ajustados para definir exatamente o contexto.

  • div p: todos os elementos p DENTRO de um elemento div;
  • div > p: todos os elementos p que são FILHOS DIRETOS de um elemento div;
  • div + p: todos os elementos p que são posicionados IMEDIATAMENTE após um elemento div;
  • div ~ p: todos os elementos p que são PRECEDIDOS por um elemento div, dentro de um mesmo elemento pai;
3
  • 1
    Essa parte div + p: todos os elementos p que são posicionados IMEDIATAMENTE após um elemento div; fiquei com uma dúvida. Meu exemplo só pega o primeiro p encontrado. E pelo que entendi você disse que pega todos, é isso mesmo @Anderson? No mais ficou bem claro, gostei demais dos exemplos :)
    – Marconi
    Commented 4/04/2017 às 14:00
  • 2
    @Marconi, são todos do DOM, no caso. Se houverem mais de um p que sucedem div, todos serão estilizados. Atinge apenas o primeiro para aquela determinada div, mas se houverem outras, também serão atingidas. Alterei o exemplo deste seletor e adicionei uma nota esclarecendo.
    – Woss
    Commented 4/04/2017 às 14:05
  • 2
    Deixei um Fiddle explicando o que explicou por último.
    – Marconi
    Commented 5/04/2017 às 11:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .