Seletor CSS :nth-last-child()
Exemplo
Especifique uma cor de fundo para cada elemento <p> que é o segundo filho de seu pai, contando a partir do último filho:
p:nth-last-child(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, independentemente do tipo, de seu pai, contando a partir do último filho.:nth-last-child(n)
n pode ser um número, uma palavra-chave ou uma fórmula.
Dica: Observe o seletor :nth-last-of-type() para selecionar o elemento que é o n -ésimo filho, de um tipo especificado , de seu pai, contando a partir do último filho.
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-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Sintaxe CSS
:nth-last-child(number) {
css declarations;
}
Mais exemplos
Exemplo
Ímpar e par são palavras-chave que podem ser usadas para corresponder a elementos filho cujo índice é par ou ímpar.
Aqui, especificamos duas cores de fundo diferentes para elementos p ímpares e pares, contando a partir do último filho:
p:nth-last-child(odd)
{
background: red;
}
p:nth-last-child(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, contando a partir do último filho:
p:nth-last-child(3n+0)
{
background: red;
}