Diferença entre :nth-child e :nth-of-type

Neste post vamos ver a diferença entre :nth-child e :nth-of-type para utilizar ao escrever seu css.

Vamos supor que dentro da tag <footer>

<footer>
 <p>Primeiro texto</p>
 <p>Segundo texto</p> <!-- precisamos selecionar este -->
</footer>

Com a utilização de “:nth-child” e “:nth-of-type” podemos conseguir o mesmo resultado colocando no css:

p:nth-child(2) { color: blue; }

ou

p:nth-of-type(2) { color: blue; }

No seletor :nth-child, significa selecionar um elemento “se”:

  1. É um elemento de parágrafo
  2. É o segundo filho de um pai

No seletor :nth-of-type, significa:

  1. Seleciona o segundo parágrafo filho de um pai

O :nth-of-type é menos condicional que o seletor :nth-child.

Vamos supor que dentro da tag <footer> precisamos selecionar a segunda tag:
Digamos que tivemos que adicionar uma tag e ficou assim:

<footer>
 <h1>Meu h1 - título</h1>
 <p>Primeiro texto</p>
 <p>Segundo texto</p> <!-- precisamos selecionar este -->
</footer>

Com o :nth-child irá selecionar errado, pois irá pegar o segundo elemento ( queremos o “Segundo texto” ) e também porque este elemento é a 1ª tag “p” (queremos a 2ª).

p:nth-child(2) { color: blue; }

Com o :nth-of-type irá selecionar correto, porém se adicionarmos mais tags “p” junto ao html poderá ficar errado a seleção.

p:nth-of-type(2) { color: blue; }

O :nth-child acima agora seleciona o texto “Primeiro texto” em vez de “Segundo texto”.

Se tiveremos que adicionar um h2 depois do h1, o seletor :nth-child não vai selecionar nada porque agora o segundo filho não é mais uma tag “p” e com isso não encontra nada.

O :nth-of-type irá funcionar, porém imagine se tiver um script que irá adicionar tags “p” automaticamente antes das criadas inicialmente, o seletor não irá funcionar corretamente. Nesse caso seria melhor utilizar:

p:nth-last-child(1) { color: blue; }

para que selecione sempre o último independente de quantas tags “p” vierem a seguir.



<footer>
 <h1>Meu h1 - título</h1>
 <h2>Meu h2 - título</h2>
 <p>Primeiro texto</p>
 <p>segundo texto</p>
 <p>terceiro texto</p>
 <p>quarto texto</p>
 <p>quinto texto</p><!-- precisamos selecionar este -->
</footer>

O seletor :nth-child é mais comum, mas vale a pena conhecer e testar a utilização de cada um.