Selettore CSS nth-child: odd, even e formule con esempi

Oggi torniamo sulle basi del CSS. Tendo a usare i selettori CSS nth-child nei miei articoli.

E questo mi ha fatto capire che non ho mai davvero ripreso le basi dei selettori css nth-child. nth-child è una pseudo-classe CSS che permette di selezionare gli elementi.

Oggi esploriamo le possibilità di questo potente selettore CSS con qualche esempio.

Partiamo da qualche selettore css nth-child di base:

Possiamo indicare il numero dell’elemento che vogliamo selezionare. Diciamo che vogliamo il terzo elemento della lista.

.article-list li:nth-child(3) {
    	color: green;
}

<ul class="article-list">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

Il risultato è che solo il terzo elemento diventa verde

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Il selettore odd/even

Possiamo selezionare tutti gli elementi di posizione pari o dispari con odd ed even.

.article-list-odd li:nth-child(odd) {
    	color: green;
}

<ul class="article-list-odd">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

Il risultato è che vengono selezionati solo gli elementi dispari:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

e nth-child(even) per i risultati pari:

.article-list-even li:nth-child(even) {
    	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Ogni X elementi

Con il selettore nth-child, possiamo anche selezionare un elemento ogni x. Diciamo, per esempio, che vogliamo prendere ogni quarto elemento:

... li:nth-child(4n) {
	color: red;
}

Ora viene selezionato ogni quarto elemento figlio:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9

... li:nth-child(4n+1) {
	color: red;
}

E se vogliamo includere il primo elemento:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9

Oppure il secondo:

... li:nth-child(4n+2) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Selezionare i primi x elementi

Possiamo perfino usare un selettore che prende tutti i tag tranne i primi tre elementi.

... li:nth-child(n+4) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Selezionare tutti gli elementi tranne i primi x

Possiamo perfino usare un selettore che prende tutti i tag tranne i primi tre elementi.

... li:nth-child(n+4) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Selezionare il primo o l’ultimo elemento

Possiamo anche selezionare il primo o l’ultimo elemento con :first-child e :last-child

... li:first-child {
	color: red;
}
... li:last-child {
	color: blue;
}

• Item 1
• Item 2
• Item 3

• Item 1
• Item 2
• Item 3

Con lo stesso principio possiamo spostarci indietro e prendere il penultimo elemento della lista.

li:nth-last-child(2) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Combinare i selettori

I selettori nth-child si possono anche combinare!

Diciamo che vuoi prendere tutti gli elementi pari dentro le liste di posizione dispari.

ul:nth-child(odd) li:nth-child(even) {
	color: red;
}

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

Conclusione

Spero che questo articolo ti sia utile quando integri i tuoi siti con la pseudo-classe nth-child. Se vuoi vedere quali altre pseudo-classi css esistono, dai un’occhiata a questi articoli:

• la pseudo-classe CSS :not
• la pseudo-classe CSS :where
• la pseudo-classe CSS :empty