Pseudo-classe :nth-last-child() do CSS

Definição e uso

CSS :nth-last-child(n) o pseudo-classe é usado para combinar cada elemento que é o décimo-não-último filho de um elemento pai, independentemente do tipo.

n pode ser um número/índice, uma palavra-chave (ímpar ou par) ou uma fórmula (como an + b)

Dica:Ver :nth-last-of-type() os pseudo-classe são usados para selecionar cada elemento que é o décimo-não-último filho de um elemento pai, independentemente do tipo. n do elemento que é um filho de um elemento que é um filho de outro.

Exemplo

Exemplo 1

Definimos a cor de fundo para cada elemento <p> que é o segundo filho em ordem decrescente do seu pai:

p:nth-last-child(2) {
  cor-de-fundo: vermelho;
}

Experimente você mesmo

Exemplo 2

ímpar e par é uma palavra-chave usada para combinar elementos cujo índice é ímpar ou par.

Aqui, definimos cores de fundo diferentes para todos os elementos <p> cujo índice é ímpar ou par em ordem decrescente:

p:nth-last-child(odd) {
  cor-de-fundo: vermelho;
}
p:nth-last-child(even) {
  cor-de-fundo: azul;
}

Experimente você mesmo

Exemplo 3

usando a fórmula (an + b) Descrição:a representa um passo inteiro, n é todo inteiro não negativo começando em 0,b é um deslocamento inteiro.

Aqui, definimos a cor de fundo para todos os elementos <p> cujo índice é múltiplo de 3 em ordem decrescente:

p:nth-last-child(3n+0) {
  cor-de-fundo: vermelho;
}

Experimente você mesmo

Sintaxe CSS

:nth-last-child(índice | ímpar | par | an+b) {
  declarações css;
}

Detalhes técnicos

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente esse pseudo-classe.