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>

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

ou

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:

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ª).

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

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:

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



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

Deixe seu comentário abaixo

Loading Facebook Comments ...