Traduzione dell’articolo “How nth-child Works” del blog “CSS TRICKS.“
C’è un selettore CSS, ovvero un pseudo-selettore, denominato nth-child. Ecco un esempio di utilizzo:
ul li:nth-child(3n+3) {
color: #ccc;
}Quello che fa il CSS di cui sopra, è selezionare ogni terzo elemento dell’elenco all’interno di liste non ordinate. Cioè, il 3 °, 6 °, 9 °, 12 °, ecc Ma come funziona? E quali altri tipi di cose ci si può fare con nth-child? Diamo uno sguardo.
Si riduce a ciò che è tra quelle parentesi. Nth-child accetta due parole chiave in quella posizione: “even (pari)” e “odd (dispari)”. Questo dovrebbe essere abbastanza evidente. “Even” seleziona elementi anche numerati, come il 2 °, 4 °, 6 °, ecc “odd”, seleziona gli elementi dispari, come 1 °, 3 °, 5 °, ecc
Come si è visto nel primo esempio, nth-child accetta anche espressioni tra le parentesi. L’espressione più semplice possibile? Solo un numero. Se si mette semplicemente un numero tra parentesi, si abbinerà solo a quell’elemento. Ad esempio, ecco come selezionare solo il 5° elemento:
ul li:nth-child(5) {
color: #ccc;
}Torniamo al “3n +3” dall’esempio originale però. Come funziona? Perché si seleziona ogni terzo elemento? Il trucco è capire la “n” e l’espressione algebrica che rappresenta. Pensate ad “n”, come una partenza da zero e poi un insieme di tutti gli interi positivi. Poi completate l’espressione. Così il 3n è “3 x n”, e l’intera espressione è l’insieme di “(3xn) +3”. Ora, sostituendo lo zero agli interi positivi, otteniamo:
(3 x 0) + 3 = 3 = terzo Elemento
(3 x 1) + 3 = 6 = sesto Elemento
(3 x 2) + 3 = 9 = nono Elemento
etc.
Quindi, come potete vedere, i risultati sono esattamente gli stessi, non c’è bisogno del “+3”. Possiamo usare sia “n” con valori negativi, sia la sottrazione nelle espressioni. Ad esempio, 4n-1:
(4 x 0) – 1 = -1 = nessun risultato
(4 x 1) – 1 = 3 = terzo elemento
(4 x 2) – 1 = 7 = settimo elemento
etc.
Utilizzando “-n” valori sembra un po ‘strano, perché se il risultato finale è negativo non c’è alcuna corrispondenza, quindi avrai bisogno di aggiungere qualcosa all’espressione per farlo tornare nuovamente positiva. Come si è visto, questa è una tecnica piuttosto intelligente. Si può usare per selezionare i “primi n elementi” con “-n +3”:
-0 + 3 = 3 = terzo elemento
-1 + 3 = 2 = secondo elemento
-2 + 3 = 1 = primo elemento
-3 + 3 = 0 = nessun risultato
etc.
Sitepoint ha una guida di riferimento piacevole, che comprende la tabella “handy-dandy” che io spudoratamente ripubblico qui:
| n | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
|---|---|---|---|---|---|---|
| 0 | 1 | 1 | 4 | – | – | 3 |
| 1 | 3 | 5 | 8 | 4 | 3 | 2 |
| 2 | 5 | 9 | 12 | 8 | 8 | 1 |
| 3 | 7 | 13 | 16 | 12 | 13 | – |
| 4 | 9 | 17 | 20 | 16 | 18 | – |
| 5 | 11 | 21 | 24 | 20 | 23 | – |
COMPATIBILITA’ CON I BROWSER
Nth-child è uno di quegli attributi CSS piuttosto sfortunati con una quasi piena compatibilità cross-browser, fatta eccezione per il supporto completamente da zero in IE, compreso IE 8.
Così, quando si tratta del suo uso, se il risultato finale è “progressive enhancement (work in progress) ” in qualche modo (ad esempio, l’applicazione di una tavolozza di colori “cool” per le righe della tabella), lo si può usare.
Al contrario invece se si sta facendo qualcosa di più importante, non si può fare affidamento su di esso per la struttura del sito. Ad esempio la rimozione del margine destro da ogni terza casella in una griglia di box tre per tre, in modo che si adattino perfettamente.
Ci si può salvare qui se si utilizza jQuery, che supporta tutti i selettori CSS tra cui: nth-child dove il selettore funziona, anche in Internet Explorer.
ANCORA NON LO USI?
Io non sono un grande fan della frase “Sono un principiante”.
Certo che lo sei, tutti lo sono. Ausili visivi sono estremamente utili in situazioni proprio come queste.
Per aiutare, ho messo insieme un po ‘di pagine test per nth-child. Lì, è possibile digitare nelle espressioni e vedere i risultati di ciò che si sceglie.
Vedi anche questa pagina di utili ricette per un rapido copia e incolla di situazioni più comuni dell’uso di nth-child.
Traduzione dell’articolo “How nth-child Works” del blog “CSS TRICKS.“
