CSS :nth-child() Pseudo Classe
La pseudo-classe CSS :nth-child() seleziona elementi in base alla posizione tra i fratelli. Scopri la sintassi e gli esempi pratici.
La pseudo-classe :nth-child() seleziona gli elementi in base alla loro posizione all'interno di un gruppo di elementi fratelli. Puoi passarle un numero, una parola chiave o una formula, e selezionerà il figlio o i figli corrispondenti — permettendoti di stilizzare ogni altra riga di una tabella, i primi tre elementi di un elenco, o qualsiasi pattern ripetuto senza aggiungere classi extra al tuo HTML.
Questa pagina illustra l'argomento accettato (odd, even e la formula An+B), mostra esempi eseguibili e spiega il punto di confusione più comune: come :nth-child() differisce da :nth-of-type().
Sintassi
selector:nth-child(argument) {
/* declarations */
}L'argument è una delle tre cose seguenti:
- Un numero singolo, come
:nth-child(3)— seleziona il terzo figlio. - Una parola chiave,
oddoeven. - Una formula
An+B, come:nth-child(3n+1).
Il conteggio inizia sempre da 1 per il primo figlio (non 0), e conta tutti i fratelli, non solo quelli che corrispondono al tipo del selettore — questo dettaglio è la fonte della maggior parte delle sorprese (vedi nth-child vs. nth-of-type).
Valori con parole chiave
odd
Seleziona gli elementi in posizione dispari (1, 3, 5, 7, …). È una scorciatoia per la formula 2n+1.
even
Seleziona gli elementi in posizione pari (2, 4, 6, 8, …). È una scorciatoia per la formula 2n.
odd e even sono gli strumenti principali per la "rigatura a zebra" delle righe di tabella o per alternare i colori degli elementi di un elenco.
Notazione funzionale: An+B
La formula An+B seleziona ogni elemento la cui posizione la soddisfa, dove n scorre attraverso 0, 1, 2, 3, …:
Aè la dimensione del ciclo (quanti elementi tra una corrispondenza e l'altra).Bè l'offset (da dove parte il ciclo).
Analizzando :nth-child(3n+1): sostituendo n = 0, 1, 2, … si ottengono le posizioni 1, 4, 7, 10, … — ogni terzo elemento a partire dal primo.
Altri pattern utili:
| Formula | Posizioni selezionate | Significato |
|---|---|---|
:nth-child(2n) | 2, 4, 6, … | Come even |
:nth-child(2n+1) | 1, 3, 5, … | Come odd |
:nth-child(3) | solo 3 | Un singolo elemento fisso |
:nth-child(n+4) | 4, 5, 6, … | Tutto dal quarto elemento in poi |
:nth-child(-n+3) | 1, 2, 3 | Solo i primi tre |
A e B devono essere interi. Un A negativo conta all'indietro, ed è così che -n+3 seleziona solo i primi tre figli.
Versione
Esempi
Selezione di un singolo elemento
:nth-child() code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(3) {
background: #ccc;
}
</style>
</head>
<body>
<h2>:nth-child selector example</h2>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
</body>
</html>Solo il terzo <p> riceve uno sfondo grigio.
Uso delle parole chiave "odd" e "even"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(odd) {
background: #1c87c9;
color: #eeeeee;
}
p:nth-child(even) {
background: #666666;
color: #eeeeee;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Uso di una formula An+B
Questo esempio usa :nth-child(3n) per evidenziare ogni terzo elemento dell'elenco:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:nth-child(3n) {
background: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</body>
</html>Gli elementi 3 e 6 vengono evidenziati, perché 3n restituisce 3 e 6.
nth-child vs. nth-of-type
Questa è la trappola in cui cadono la maggior parte delle persone. :nth-child() conta tutti i fratelli e poi verifica se l'elemento selezionato è anche del tipo corretto. Non conta "l'n-esimo elemento di questo tipo".
Considera questo markup:
<div>
<h2>Heading</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>Qui p:nth-child(2) seleziona il primo <p> — perché il <p> si trova alla posizione figlio 2 (l'<h2> è alla posizione 1). Scrivere p:nth-child(1) non corrisponderebbe a nulla, poiché la posizione 1 è l'intestazione, non un paragrafo.
Se vuoi "il secondo paragrafo indipendentemente da ciò che viene prima", usa invece :nth-of-type(), che conta solo gli elementi dello stesso tipo.
Selettori correlati
:nth-of-type()— come:nth-child()ma conta solo i fratelli dello stesso tipo di elemento.:nth-last-child()— stessa sintassi della formula, ma conta a partire dall'ultimo fratello all'indietro.:first-childe:last-child— scorciatoie per il primo e l'ultimo fratello.- CSS Selectors — panoramica di ogni tipo di selettore.