Pseudoclasse nth-last-child

La pseudoclasse nth-last-child seleziona un elemento che è l'ennesimo discendente del genitore, contando dalla fine. Si comporta in modo analogo a nth-child, solo che il conteggio viene effettuato dalla fine.

Sintassi

cssselettore:nth-last-child(numero | odd | even | espressione) {
  
}

Valori

Valore	Descrizione
numero	Un numero positivo a partire da `1`. Specifica il numero dell'elemento a cui vogliamo accedere. La numerazione degli elementi inizia da `1`.
`odd`	Elementi dispari.
`even`	Elementi pari.
espressione	È possibile comporre espressioni speciali con la lettera n, che indica tutti i numeri interi da zero (non da uno) a infinito. Quindi, `2n` significa tutti i numeri pari (a partire dal secondo). Come si capisce? Sostituiamo `n` in sequenza con numeri da `0` in poi: se n = 0, allora 2n darà 0 - un tale elemento non esiste (la numerazione degli elementi parte da 1), se n = 1, allora 2n darà 2 - il secondo elemento, se n = 2, 2n dà 4 - il quarto elemento. Se scriviamo 3n - questo sarà ogni terzo elemento (a partire dal terzo), e così via.

Esempio

In questo esempio renderemo di colore rosso quell'li che è il 4° dalla fine discendente del suo genitore:

html<ul>
  <li>voce di lista</li>
  <li>voce di lista</li>
  <li>voce di lista</li>
  <li>voce di lista</li>
  <li>voce di lista</li>
</ul>

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

Результат:

Esempio

Ora renderemo rossi tutti gli li pari dalla fine:

html<ul>
  <li>voce di lista</li>
  <li>voce di lista</li>
  <li>voce di lista</li>
  <li>voce di lista</li>
  <li>voce di lista</li>
</ul>

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

Результат:

Esempio

Ora renderemo rossi tutti gli li dispari dalla fine:

html<ul>
  <li>voce di lista</li>
  <li>voce di lista</li>
  <li>voce di lista</li>
  <li>voce di lista</li>
  <li>voce di lista</li>
</ul>

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

Результат:

Esempio

Ora renderemo rossi ogni terzo li dalla fine:

html<ul>
  <li>voce di lista</li>
  <li>voce di lista</li>
  <li>voce di lista</li>
  <li>voce di lista</li>
  <li>voce di lista</li>
</ul>

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

Результат: