Selettore CSS :nth-of-type()
Esempio
Specifica un colore di sfondo per ogni elemento <p> che è il secondo elemento p del suo genitore:
p:nth-of-type(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, di un tipo particolare, del suo genitore.:nth-of-type(n)
n può essere un numero, una parola chiave o una formula.
Suggerimento: guarda il selettore :nth-child() per selezionare l'elemento che è l' n - esimo figlio, indipendentemente dal tipo , del suo genitore.
Versione: | CSS3 |
---|
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente il selettore.
Selector | |||||
---|---|---|---|---|---|
:nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Sintassi CSS
:nth-of-type(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 (l'indice del primo figlio è 1).
Qui, specifichiamo due diversi colori di sfondo per gli elementi p pari e dispari:
p:nth-of-type(odd)
{
background: red;
}
p:nth-of-type(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:
p:nth-of-type(3n+0)
{
background: red;
}