Exemplo
Especifique uma cor de fundo para cada <p> elemento que é o segundo filho de seu pai:
p:nth-child(2)
{
background: #ff0000;
}
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A :nth-child( n ) selector corresponde a cada elemento que é o n th criança, independentemente do tipo, de seu pai.
n pode ser um número, uma palavra-chave, ou uma fórmula.
Tip: Olhe para o : nth-of-type () para selecionar o elemento que é o n th criança, of a particular type , de seu pai.
| Versão: | CSS3 |
|---|
Suporte a navegadores
Os números na tabela especifica a primeira versão do navegador que suporta plenamente o selector.
| seletor | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9 | 3,5 | 3.2 | 9,6 |
CSS Syntax
mais Exemplos
Exemplo
Pares e ímpares são palavras-chave que podem ser usados para combinar os elementos filho cujo índice é par ou ímpar (the index of the first child is 1) .
Aqui, especificamos duas cores diferentes de fundo para elementos pares e ímpares p:
p:nth-child(odd)
{
background: #ff0000;
}
p:nth-child(even)
{
background: #0000ff;
}
Tente você mesmo " Exemplo
Usando uma fórmula ( an + b ) . Descrição: a representa um tamanho ciclo, n é um contador (starts at 0) , e b é um valor de deslocamento.
Aqui, nós especificar uma cor de fundo para todos os elementos p cujo índice é um múltiplo de 3:
p:nth-child(3n+0)
{
background: #ff0000;
}
Tente você mesmo "