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;