: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
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
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! (en-US)
| 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 |