Pseudoclasse nth-last-child

A pseudoclasse nth-last-child seleciona um elemento que é o enésimo filho do pai, contando a partir do final. Comporta-se de forma análoga a nth-child, só que a contagem é feita a partir do final.

Sintaxe

cssseletor:nth-last-child(número | odd | even | expressão) {
  
}

Valores

Valor	Descrição
número	Um número positivo a partir de `1`. Especifica o número do elemento ao qual queremos nos referir. A numeração dos elementos começa em `1`.
`odd`	Elementos ímpares.
`even`	Elementos pares.
expressão	É possível compor expressões especiais com a letra n, que representa todos os números inteiros de zero (não de um) ao infinito. Assim, `2n` significa todos os números pares (a partir do segundo). Como entender isso? Substituímos `n` sequencialmente por números a partir de `0` e assim por diante: se n = 0, então 2n resultará em 0 - esse elemento não existe (numeração de elementos começa em 1), se n = 1, então 2n resultará em 2 - o segundo elemento, se n = 2, 2n resulta em 4 - o quarto elemento. Se escrevermos 3n - isso será cada terceiro elemento (a partir do terceiro), e assim por diante.

Exemplo

Neste exemplo, tornaremos vermelha a cor do li que é o 4º filho a partir do final do seu pai:

html<ul>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
</ul>

cssli:nth-last-child(4) {
  color: red;
}

Результат:

Exemplo

Agora, tornaremos vermelhos todos os li pares a partir do final:

html<ul>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
</ul>

cssli:nth-last-child(even) {
  color: red;
}

Результат:

Exemplo

Agora, tornaremos vermelhos todos os ímpares a partir do final li:

html<ul>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
</ul>

cssli:nth-last-child(odd) {
  color: red;
}

Результат:

Exemplo

Agora, tornaremos vermelhos cada terceiro li a partir do final:

html<ul>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
</ul>

cssli:nth-last-child(3n) {
  color: red;
}

Результат: