Esempio
Specificare un colore di sfondo per ogni <p> elemento che è il secondo figlio del suo genitore:
p:nth-child(2)
{
background: #ff0000;
}
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
L' :nth-child( n ) selettore seleziona ogni elemento che è il n ° figlio, indipendentemente dal tipo, del suo genitore.
n può essere un numero, una parola chiave o una formula.
Tip: Guardate la :) (ennesima-di-tipo -selettore per selezionare l'elemento che è il n ° figlio, of a particular type , del suo genitore.
| Versione: | CSS3 |
|---|
Supporto per il browser
I numeri nella tabella specifica la prima versione del browser che supporta pienamente il selettore.
| Selettore | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS Sintassi
Altri esempi
Esempio
Parole chiave pari e dispari sono che possono essere utilizzati per abbinare elementi figlio il cui indice è pari o dispari (the index of the first child is 1) .
Qui, specifichiamo due diversi colori di sfondo per gli elementi pari e dispari P:
p:nth-child(odd)
{
background: #ff0000;
}
p:nth-child(even)
{
background: #0000ff;
}
Prova tu stesso " Esempio
Utilizzando una formula ( an + b ) . Descrizione: a rappresenta una dimensione ciclo, n è un contatore (starts at 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:
p:nth-child(3n+0)
{
background: #ff0000;
}
Prova tu stesso "