Queria saber se alguém sabe a diferença de usar o > no css. Exemplo: " nav a {} " ou " nav > a {}"
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Queria saber se alguém sabe a diferença de usar o > no css. Exemplo: " nav a {} " ou " nav > a {}"
Pelo o que entendi, o sinal de > é usado para selecionar o filho-direto dos elementos relacionados. Por exemplo, eu tenho a seguinte estrutura:
<div class="box1">
<p>texto</p>
<p>texto</p>
<p><img src="imagem1.jpg"></p>
<p>texto</p>
</div>
<div class="box2">
<p>texto</p>
<p>texto</p>
<p><img src="imagem1.jpg"></p>
<p>texto</p>
</div>E quero aplicar, por exemplo, um padding na tag img dentro do box2. Uso:
div > p > img {
padding: 10px;
}Pois:
O operador > irá buscar qualquer elemento filho direto entre os elementos relacionados. Isto é, div > p buscará todos os elementos p que possuem um elemento pai div e p > img buscará todos os elementos img que possuem um elemento pai p.