Pseudo-classe :nth-last-of-type CSS

Definição e uso

CSS :nth-last-of-type(n) os pseudo-classe para combinar o elemento que é o penúltimo do tipo específico do pai, contando para trás. n de cada elemento.

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

Dica:Ver :nth-last-child() os pseudo-classe para escolher o elemento que é o penúltimo do tipo específico do pai, contando para trás. n do elemento, independentemente do seu tipo.

Exemplo

Exemplo 1

Definimos a cor de fundo para cada <p> que é o segundo filho à direita do seu pai, contando para trás.

Além disso, definimos a cor de fundo para cada <li> que é o terceiro filho à direita do seu pai, contando para trás:

p:nth-last-of-type(2) {
  background: vermelho;
}
li:nth-last-of-type(3) {
background: amarelo;
}

Experimente você mesmo

Exemplo 2

ímpar e par é uma palavra-chave usada para combinar elementos cujos índices são ímpares ou pares (o índice do primeiro filho é 1).

Aqui, definimos cores de fundo diferentes para os elementos <p> cujos índices são ímpares e pares, contando para trás:

p:nth-last-of-type(ímpar) {
  background: vermelho;
}
p:nth-last-of-type(par) {
  background: azul;
}

Experimente você mesmo

Exemplo 3

Usando a fórmula (an + b). Descrição: a representa o passo inteiro, n é todos os inteiros não negativos começando em 0, b é o deslocamento inteiro.

Aqui, definimos a cor de fundo para todos os elementos <p> e <li> cujo índice é múltiplo de 3, contando para trás:

p:nth-last-of-type(3n) {
  background: vermelho;
}
li:nth-last-of-type(3n) {
  background: amarelo;
}

Experimente você mesmo

Sintaxe CSS

:nth-last-of-type(í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.