:nth-of-type()

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

Error: could not find syntax for this item

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 com navegadores

BCD tables only load in the browser

Veja também