:nth-of-type()

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

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

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

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