Selettore CSS :ennesimo figlio()
Esempio
Specifica un colore di sfondo per ogni elemento <p> che è il secondo figlio del suo genitore, a partire dall'ultimo figlio:
p:nth-last-child(2)
{
background: red;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
Il selettore trova la corrispondenza con ogni elemento che è l' n - esimo figlio, indipendentemente dal tipo, dal suo genitore, a partire dall'ultimo figlio.:nth-last-child(n)
n può essere un numero, una parola chiave o una formula.
Suggerimento: guarda il selettore :nth-last-of-type() per selezionare l'elemento che è l' n - esimo figlio, di un tipo specificato , del suo genitore, a partire dall'ultimo figlio.
Versione: | CSS3 |
---|
Supporto del browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente il selettore.
Selector | |||||
---|---|---|---|---|---|
:nth-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Sintassi CSS
:nth-last-child(number) {
css declarations;
}
Altri esempi
Esempio
Pari e dispari sono parole chiave che possono essere utilizzate per abbinare elementi figlio il cui indice è pari o dispari.
Qui, specifichiamo due diversi colori di sfondo per gli elementi p pari e dispari, a partire dall'ultimo figlio:
p:nth-last-child(odd)
{
background: red;
}
p:nth-last-child(even)
{
background: blue;
}
Esempio
Utilizzando una formula ( an + b ). Descrizione: a rappresenta una dimensione del ciclo, n è un contatore (inizia da 0) e b è un valore di offset.
Qui specifichiamo un colore di sfondo per tutti gli elementi p il cui indice è un multiplo di 3, contando dall'ultimo figlio:
p:nth-last-child(3n+0)
{
background: red;
}