Pseudoclasse nth-child
La pseudoclasse nth-child seleziona un elemento,
che è l'ennesimo discendente del genitore.
Sintassi
selettore:nth-child(numero | odd | even | espressione) {
}
Valori
| Valore | Descrizione |
|---|---|
| numero |
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 creare 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 capirlo? Sostituiamo in n sequenzialmente
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 rosso
quell'li che è il 4-esimo discendente
del suo genitore:
<ul>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
</ul>
li:nth-child(4) {
color: red;
}
:
Esempio
Ora renderemo rosse tutte le li pari:
<ul>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
</ul>
li:nth-child(even) {
color: red;
}
:
Esempio
Ora renderemo rosse tutte le li dispari:
<ul>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
</ul>
li:nth-child(odd) {
color: red;
}
:
Esempio
Ora renderemo rossa ogni terza
li (a partire dalla terza):
<ul>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
Esempio
Nel selettore è possibile specificare un intervallo di elementi.
Supponiamo che tu abbia un elenco di 20
elementi e devi selezionare gli elementi dal 7
al 14 inclusi. Questo può essere fatto
così:
<ol>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
<li>voce di elenco</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
