5

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?

4
  • 2
  • @Bacco essa não seria uma pergunta mais especifica?
    – haykou
    Commented 16/05/2018 às 16:50
  • 1
    A 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 2

9

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:

nth-child vs nth-of-type

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.

0

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

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 .