Na maioria das vezes eu utilizo o :nth-of-type porém não entendi exatamente a diferença entre os dois, alguém consegue explicar?
-
2Já respondida em O que significam o "n", números e sinais nos seletores "nth-child" ou "nth-last-child"?– Largato ♦Commented 16/05/2018 às 16:41
-
@Bacco essa não seria uma pergunta mais especifica?– haykouCommented 16/05/2018 às 16:50
-
1A pergunta é específica, mas a resposta dada lá responde com demonstração e tudo. Lembre-se que fechamento não tira a pergunta do site e nem é demérito, tampouco sinal de problema. A pergunta continua válida e serve de índice para a outra postagem.– Largato ♦Commented 16/05/2018 às 17:01
-
E o titulo da sua pergunta ajudará outros usuários a encontrarem a solução, será semelhante a mesclar :) ... a sua continua vinculada :D– Syzoth ♦Commented 16/05/2018 às 17:05
2 Respostas
o :nth-child()
irá considerar todos elementos filhos "diretos" no valor/calculo passado entre os parenteses, então por exemplo um "efeito zebra":
div, p {
background: #cfcfcf;
margin: 2px 0;
}
p:nth-child(2n+1) {
background: #f00;
}
<section>
<p>a</p>
<p>b</p>
<p>c</p>
<div>foo</div>
<p>d</p>
<p>e</p>
<p>f</p>
</section>
<hr>
<section>
<p>a</p>
<p>b</p>
<p>c</p>
<div>foo</div>
<p>d</p>
<p>e</p>
<p>f</p>
</section>
Veja que mesmo <div>foo</div>
sendo diferente de <p>
ainda sim o efeito zebra continua considerando ele.
Agora o efeito é diferente com :nth-of-type
, irá notar que ele irá desconsiderar o <div>foo</div>
, pois somente os do tipo definido antes do :
serão considerados, resultado:
div, p {
background: #cfcfcf;
margin: 2px 0;
}
p:nth-of-type(2n+1) {
background: #f00;
}
<section>
<p>a</p>
<p>b</p>
<p>c</p>
<div>foo</div>
<p>d</p>
<p>e</p>
<p>f</p>
</section>
<hr>
<section>
<p>a</p>
<p>b</p>
<p>c</p>
<div>foo</div>
<p>d</p>
<p>e</p>
<p>f</p>
</section>
Veja a diferença de ambas na imagem:
Na primeira (com nth-child
) o <p>d</p>
ficou com o fundo vermelho, isto porque o elemento anterior <div>foo</div>
apesar de não ser afetado pelo CSS ele é considerado no "calculo" 2n+1
(ou qualquer que seja passado entre os parenteses).
Já no segundo (com nth-of-type
), o <p>d</p>
continuou cinza e tudo que veio após o <div>foo</div>
passou a ter outras cores, isso porque o <div>foo</div>
não é considerado, pois o seletor nth-of-type
especifica que só podem ser do mesmo tipo para que o calculo considere.
O seletor: nth-child, significa selecionar um elemento se:
É um elemento de parágrafo.
É o segundo filho de um pai
O seletor:nth-of-type, significa selecionar um elemento se:
Selecione o segundo parágrafo filho de um pai
p:nth-child(2) { color: blue; }
p:nth-of-type(2) { color: red; }
<section>
<p>Little</p>
<span>Piggy</span>
<p>teste</p>
</section>
O nth-of-type tem menos condições de avaliação. fonte