: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.
/* 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
Specification |
---|
Selectors Level 4 # nth-of-type-pseudo |
Compatibilidade com navegadores
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:nth-of-type() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.