Il :nth-childselettore consente di selezionare uno o più elementi in base al loro ordine di origine, secondo una formula.
/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )È definita nella specifica CSS Selectors Level 3 come una "pseudo-classe strutturale", nel senso che viene utilizzata per definire lo stile del contenuto in base alla sua relazione con gli elementi padre e fratello.
Supponiamo di creare una griglia CSS e di voler rimuovere il margine su ogni quarto modulo della griglia. Ecco quell'HTML:
One Two Three Four Five Invece di aggiungere una classe a ogni quarto elemento (ad esempio .last), possiamo usare :nth-child:
.module:nth-child(4n) ( margin-right: 0; )Il :nth-childselettore prende un argomento: questo può essere un singolo intero, le parole chiave even, oddo una formula. Se viene specificato un numero intero, viene selezionato un solo elemento, ma le parole chiave o una formula itereranno attraverso tutti i figli dell'elemento padre e selezioneranno gli elementi corrispondenti, in modo simile agli elementi di navigazione in un array JavaScript. Le parole chiave "pari" e "dispari" sono semplici (2, 4, 6, ecc. O 1, 3, 5 rispettivamente). La formula è costruita utilizzando la sintassi an+b, dove:
- "A" è un valore intero
- "N" è la lettera letterale "n"
- "+" È un operatore e può essere "+" o "-"
- "B" è un numero intero ed è richiesto se un operatore è incluso nella formula
È importante notare che questa formula è un'equazione e itera attraverso ogni elemento di pari livello, determinando quale sarà selezionato. La parte "n" della formula, se inclusa, rappresenta un insieme di numeri interi positivi crescenti (proprio come l'iterazione di un array). Nel nostro esempio precedente, abbiamo selezionato ogni quarto elemento con la formula 4n, che ha funzionato perché ogni volta che un elemento è stato controllato, "n" è aumentato di uno (4 × 0, 4 × 1, 4 × 2, 4 × 3, ecc.). Se l'ordine di un elemento corrisponde al risultato dell'equazione, viene selezionato (4, 8, 12, ecc.). Per una spiegazione più approfondita della matematica coinvolta, leggi questo articolo.
Per illustrare ulteriormente, ecco alcuni esempi di :nth-childselettori validi :
Fortunatamente, non devi sempre fare i conti da solo: ci sono diversi :nth-childtester e generatori là fuori:
- CSS-Tricks Tester
- Tester di Lea Verou
: nth-child (an + b of)
C'è un filtro poco conosciuto che può essere aggiunto in :nth-childbase alla specifica CSS Selectors: la capacità di selezionare il :nth-childsottoinsieme di elementi, utilizzando il of formato. Supponi di avere un elenco di contenuti misti: alcuni hanno la classe .video, altri la classe .picturee si desidera selezionare le prime 3 immagini. Puoi farlo con il filtro "di" in questo modo:
:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )Tieni presente che questo è diverso dall'aggiunta di un selettore direttamente al :nth-childselettore:
.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )Questo può creare un po 'di confusione, quindi un esempio potrebbe aiutare a illustrare la differenza:
Il supporto del browser per il filtro "di" è molto limitato: al momento in cui scrivo, solo Safari supportava la sintassi. Per controllare lo stato del tuo browser preferito, ecco i problemi aperti relativi a :nth-child(an+b of s):
- Firefox: supporto per nth-child (An + B of sel)
- Chrome: implementazione: nth-child (an + b of S)
Punti di interesse
:nth-childitera attraverso gli elementi a partire dall'inizio dell'ordine di origine. L'unica differenza tra esso ed:nth-last-childè che quest'ultimo itera attraverso gli elementi a partire dal fondo dell'ordine di origine.- La sintassi per selezionare il primo
nnumero di elementi è un po 'controintuitiva. Si inizia con-n, più il numero positivo di elementi che si desidera selezionare. Ad esempio,li:nth-child(-n+3)selezionerà i primi 3lielementi. - Il
:nth-childselettore è molto simile:nth-of-typema con una differenza fondamentale: è meno specifico. Nel nostro esempio sopra, produrranno lo stesso risultato perché stiamo iterando solo su.moduleelementi, ma se stessimo iterando su un gruppo più complesso di fratelli,:nth-childproveremmo a far corrispondere tutti i fratelli, non solo i fratelli dello stesso tipo di elemento. Ciò rivela il potere di:nth-child-it può selezionare qualsiasi elemento di pari livello in un arrangiamento, non solo gli elementi specificati prima dei due punti.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Qualunque | 3.2+ | Qualunque | 9.5+ | 9+ | Qualunque | Qualunque |
:nth-childè stato introdotto nel modulo 3 dei selettori CSS, il che significa che le vecchie versioni dei browser non lo supportano. Tuttavia, il supporto del browser moderno è impeccabile ei nuovi pseudo-selettori sono ampiamente utilizzati negli ambienti di produzione. Se è necessario il supporto di browser meno recenti, utilizzare polyfill per IE o utilizzare questi selettori in modi non critici, come consigliato dal miglioramento progressivo.