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

Definizione e uso

CSS :nth-last-child(n) I pseudo-classe abbinano ogni elemento che è il n-esimo figlio inverso dell'elemento genitore, indipendentemente dal tipo.

n può essere un numero/index, una parola chiave (dispari o pari) o una formula (come an + b)

Suggerimento:Visualizza :nth-last-of-type() I pseudo-classe selezionano ogni elemento che è il n-esimo figlio inverso dell'elemento genitore, indipendentemente dal tipo. n elemento figlio.

Esempio

Esempio 1

Assegniamo il colore di sfondo a ciascun <p> elemento che è il secondo figlio inverso del suo elemento genitore:

p:nth-last-child(2) {
  background-color: red;
}

Prova tu stesso

Esempio 2

dispari e pari è una parola chiave utilizzabile per abbinare gli elementi figli con l'indice dispari o pari.

Qui, assegniamo colori di sfondo diversi ai <p> elementi con l'indice inverso dispari e pari:

p:nth-last-child(odd) {
  background-color: red;
}
p:nth-last-child(even) {
  background-color: blue;
}

Prova tu stesso

Esempio 3

Utilizzando la formula (an + bDescrizione:a Rappresenta un passo intero, n sono tutti gli interi non negativi che iniziano da 0,b è un offset intero.

Qui, assegniamo il colore di sfondo ai <p> elementi con l'indice inverso multiplo di 3:

p:nth-last-child(3n+0) {
  background-color: red;
}

Prova tu stesso

Sintassi CSS

:nth-last-child(indice | dispari | pari | an+b) {
  declarazioni css;
}

Dettagli tecnici

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta il pseudo-classe per la prima volta.