:nth-of-type()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

css
/* 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

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

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

Specification
Selectors Level 4
# nth-of-type-pseudo

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:nth-of-type()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Veja também