Pseudoclasse nth-child

La pseudoclasse nth-child seleziona un elemento, che è l'ennesimo discendente del genitore.

Sintassi

cssselettore: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:

html<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>

cssli:nth-child(4) {
  color: red;
}

Результат:

Esempio

Ora renderemo rosse tutte le li pari:

html<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>

cssli:nth-child(even) {
  color: red;
}

Результат:

Esempio

Ora renderemo rosse tutte le li dispari:

html<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>

cssli:nth-child(odd) {
  color: red;
}

Результат:

Esempio

Ora renderemo rossa ogni terza li (a partire dalla terza):

html<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>

cssli: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ì:

html<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>

cssli:nth-child(n+7):nth-child(-n+14) {
  color: red;
}

Результат: