Tradução em progresso.

A pseudo-classe CSS :nth-of-type() corresponde a um ou mais elementos de um dado tipo, baseado em sua posição entre um grupo de irmãos.

/* Seleciona cada quarto elemento <p> 
   entre qualquer grupo de irmãos */
p:nth-of-type(4n) {
  color: lime;
}

Sintaxe

A pseudo-classe nth-of-type é especificada com um único argumento, o qual representa o padrão para a correspondência dos elementos. 

Veja :nth-child para uma explicação mais detalhada de sua sintaxe.

Sintaxe formal

:nth-of-type( <nth> )

where
<nth> = <an-plus-b> | even | odd

Exemplos

Exemplo básico

HTML

<div>
  <div>Este elemento não é contado.</div>
  <p>1º parágrafo.</p>
  <p>2º parágrafo.</p>
  <div>Este elemento não é contado.</div>
  <p>3º parágrafo.</p>
  <p>4º parágrafo.</p>
</div>

CSS

/* Parágrafos ímpares */
p:nth-of-type(2n+1) {
  color: red;
}

/* Parágrafos pares */
p:nth-of-type(2n) {
  color: blue;
}

/* Primeiro parágrafo */
p:nth-of-type(1) {
  font-weight: bold;
}

Resultado

Especificações

Especificação Sitação Comentário
Selectors Level 4
The definition of ':nth-of-type' in that specification.
Rascunho atual Não é necessário que os elementos correspondentes tenham um pai.
Selectors Level 3
The definition of ':nth-of-type' in that specification.
Recomendação Definição inicial.

Compatibilidade de Browser

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 3.5 (1.9.1) 9.0 9.5 3.1
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 (Yes) 1.0 (1.9.1) 9.0 9.5 3.1

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: evandrosevergnini
 Última atualização por: evandrosevergnini,