Comprensione del selettore CSS :nth-child()

Come tutti i selettori CSS, puoi utilizzare :nth-child() per identificare gli elementi in una pagina web e applicare loro degli stili. Ma questo selettore ti consente di restringere un insieme di fratelli in base alla loro posizione relativa.

Il selettore supporta alcune parole chiave di base per i casi comuni, ma fornisce anche una potente sintassi di corrispondenza dei modelli. Usandolo, puoi selezionare elementi in base a schemi regolari e ripetuti o definizioni più complesse, in base alle tue esigenze.

La sintassi del selettore :nth-child()

Come un Selettore pseudo-classe CSS, la sintassi :nth-child() differisce da quella degli altri selettori. Prende un argomento come modello per la corrispondenza degli elementi in un insieme di fratelli:

:nth-child(args) {
/*...*/
}

Il focus principale è sugli argomenti tra parentesi. Questi argomenti definiscono il sottoinsieme di elementi da selezionare.

Utilizzo dei valori delle parole chiave per i casi comuni

Questo selettore può contenere due valori di parole chiave: strano E Anche. Sono particolarmente utili per stilizzazione di righe alternate in una tabella.

Un semplice elenco ordinato è un altro buon esempio di quando potresti utilizzare questi valori di parole chiave:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

Usando il :ennesimo-bambino (dispari) selettore, puoi cambiare il colore di ciascun elemento alternativo:

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

Gli elementi iniziano dall'indice 1, quindi il primo elemento apparirà rosso, poi il terzo e così via:

Notazione funzionale per una maggiore flessibilità

Puoi utilizzare un singolo numero intero per selezionare un singolo elemento, in questo modo:

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

In questo caso, il selettore corrisponde solo al quarto elemento dell'elenco:

Questa sintassi è un caso speciale della sintassi funzionale più generale che seleziona gli elementi che corrispondono a un determinato modello. Questa sintassi è:

:nth-child(An+B) {
/*...*/
}

In questa notazione, UN è la dimensione del passo. Ciò significa il numero di volte in cui il selettore si sposta per selezionare l'elemento successivo. Ti consente di selezionare ogni altro elemento, ogni terzo elemento, ecc. B è il punto iniziale da cui inizia la selezione.

Ad esempio, prendiamo l'argomento 3n+1:

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

Ciò avvierà la selezione dal primo elemento e continuerà successivamente con ogni terzo elemento:

Confrontalo con l'espressione 3n+2:

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

Questo seleziona ancora ogni terzo elemento, ma ora inizia dal secondo elemento nell'elenco:

Un altro esempio interessante è :nth-child (n+3):

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

Questo selezionerà ogni voce (n), a partire dalla terza (+3). Apparirà così:

Puoi anche utilizzare la sottrazione per ottenere determinati risultati:

li:nth-child(3n-1) {
color: red;
}

In questo esempio viene ancora selezionato un elemento ogni tre, ma si inizia dal “meno prima”. In effetti, ciò significa che selezionerà il secondo elemento dell'elenco, poi il quinto e così via:

Il di Sintassi

Puoi anche usare la parola chiave Di seguito da a selettore come argomento nel selettore :nth-child(). Questa sintassi ti consente di restringere i possibili elementi da cui seleziona il modello regolare.

Ad esempio, immagina che il tuo markup sia più complicato dell'originale:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

Ora usa :nth-child per selezionare gli elementi pari dall'insieme di quelli con una classe specifica:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Nota come solo gli elementi in grassetto con numeri pari sono rossi:

Considera anche in cosa differisce da li.new: nth-child (pari) che prende di mira .new elementi, ma solo se sono pari. Questi sarebbero gli elementi 2 e 6 nell'esempio precedente.

Lavorare con il selettore :nth-child()

Puoi ottenere design unici utilizzando il selettore :nth-child(). Puoi creare siti Web colorati ed evidenziare righe e colonne nelle tabelle di dati. Combinandolo con altri selettori CSS ti aiuterà a creare layout e design complessi.