Seletor CSS :nth-of-type()
Exemplo
Especifique uma cor de fundo para cada elemento <p> que é o segundo elemento p de seu pai:
p:nth-of-type(2)
{
background: red;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
O seletor corresponde a cada elemento que é o enésimo filho, de um tipo específico, de seu pai.:nth-of-type(n)
n pode ser um número, uma palavra-chave ou uma fórmula.
Dica: Observe o seletor :nth-child() para selecionar o elemento que é o n -ésimo filho, independentemente do tipo , de seu pai.
Versão: | CSS3 |
---|
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao seletor.
Selector | |||||
---|---|---|---|---|---|
:nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Sintaxe CSS
:nth-of-type(number) {
css declarations;
}
Mais exemplos
Exemplo
Ímpar e par são palavras-chave que podem ser usadas para corresponder a elementos filho cujo índice é ímpar ou par (o índice do primeiro filho é 1).
Aqui, especificamos duas cores de fundo diferentes para elementos p ímpares e pares:
p:nth-of-type(odd)
{
background: red;
}
p:nth-of-type(even)
{
background: blue;
}
Exemplo
Usando uma fórmula ( an + b ). Descrição: a representa um tamanho de ciclo, n é um contador (começa em 0) e b é um valor de deslocamento.
Aqui, especificamos uma cor de fundo para todos os elementos p cujo índice é um múltiplo de 3:
p:nth-of-type(3n+0)
{
background: red;
}