Le Pseudo Classi nth-child

Comprendere le Pseudo-Classi :nth-child

Eccoci ancora una volta a scoprire alcune cose che fanno la differenza tra l'essere un mediocre sviluppatore e diventare un grande sviluppatore web!  

Andare a conoscere le caratteristiche più avanzate di un qualsiasi linguaggio ci aiuta sempre di più a capire a fondo il linguaggio stesso e di sfruttarlo a nostro favore! In questo articolo voglio parlarti ulteriormente dei CSS3 ed, in particolar modo, della pseudo-classe :nth-child!

Grazie a questa famiglia di classi siamo adesso in grado di selezionare elementi multipli riferendoci alla loro posizione all’interno dell’albero del documento, ma andiamo a vedere da vicino quali siano gli elementi di questa famiglia:

  • :nth-child( num );
  • :nth-last-child( num );
  • :nth-of-type( num );
  • :nth-last-of-type( num );

In questa lista possiamo vedere che tutte le pseudo-classi accettano il parametro num, ma non farti ingannare da ciò che ho scritto, infatti non soltanto siamo in grado di specificare dei numeri al suo interno, ma anche parole chiave o una espressione numerica dell’ordine di an+b.

Sembra un pò complicato non è vero? Bene allora prima di andare a vedere nel dettaglio i valori numerici che possiamo segnalare, andiamo subito a vedere quali parole chiave sono accettate da queste pseudo-classi. I parametri che possiamo inserire come parole chiave sono semplicemente due, odd e even, e altro non faranno che aiutarci nella selezione di elementi dispari, nel primo caso, o pari.

Diapari, pari… Magari stai pensando “Cosa stai facendo? Giochi a testa o croce?!?”, assolutamente no! Traduciamo quanto detto in un esempio pratico.

Abbiamo una tabella e vogliamo applicare il famoso effetto zebra, effetto per il quale differenziamo leggermente lo sfondo di una riga con quella adiacente; fino a poco tempo fa avremmo dovuto chiedere aiuto a jQuery, o al classico JavaScript, per permetterci di selezionare i vari elementi mentre oggi, grazie alla pseudo-classe :nth-child(odd) siamo in grado di selezionare ad una ad una tutte le righe dispari della nostra tabella! Ovviamente se avessimo avuto bisogno di selezionare gli elementi pari avremmo utilizzato la forma :nth-child(even).

Adesso che abbiamo capito l’utilizzo delle parole chiave possiamo spostare la nostra attenzione al caso specifico dei numeri. Infatti se come parametro di queste pseudo-classi passiamo un semplice numero, il selettore andrà a prendere solo e soltanto l’elemento che corrisponde a quel numero! Ad esempio, se desideriamo selezionare il terzo elemento di una lista di elementi, tutto quello che dovremmo fare è specificare la pseudo-classe :nth-child(3) e lei si occuperà di contare per noi gli elementi ed applicare lo stile soltanto al terzo; quindi non avremmo più la necessità di inserire classi o id aggiuntivi che andranno a diminuire la semanticità delle nostre pagine.

Dai Numeri alle Espressioni

Abbiamo appena visto due parametri base che già ci aiutano molto nella selezione dei nostri elementi, le parole chiave ed i numeri. Ma come possiamo comportarci se vogliamo selezionare ogni terzo elemento, oppure se abbiamo la necessità di selezionare il primo elemento e applicare lo stesso stile a ogni quarto elemento dopo il primo? Detta all’inglese avremo “Expression to the Rescue”, ovvero le espressioni ci verranno in contro per soddisfare le nostre necessità.

Badate bene che non sto parlando di complicate espressioni matematiche ma di semplici espressioni che prenderanno la forma di an+b; ma cosa significa questa espressione e come si comporta? Per comprenderla a fondo proviamo a partire da un esempio numerico: 3n+4!

Come possiamo vedere abbiamo sostituito i caratteri a e b con dei numeri, mentre abbiamo lasciato intatto il valore n. Leggendo questo parametro come farebbe un qualsiasi browser capiamo questo:

Prendo il quarto elemento dell’albero e tutti gli altri elementi che si trovano in terza posizione rispetto al precedente.

Da questa dichiarazione è facile intuire che il browser tradurrà l’espressione appena passata leggendola da destra verso sinistra selezionando il quarto, settimo, decimo…. e così via fintanto che non avrà raggiunto la lista completa degli elementi. Non ti è ancora chiaro? Cerchiamo di fare un esempio più semplice. Creiamo una pagina HTML ed inseriamo al suo interno il seguente codice:

Una semplice lista non ordinata quindi! Adesso è giunto il momento di giocare un pò con i CSS e questa nuova pseudo-classe. Andiamo ad inserire la seguente regola:

A questo punto il browser leggerà qualcosa come “Devo selezionare il primo elemento e tutti i terzi elementi successivi a questo”, restituendoci qualcosa come:

Esempio comportamento :nth-child(3n+1)

Esempio comportamento :nth-child(3n+1)

Forse ci sei già arrivato da solo ma se utilizziamo l’espressione 2n+1 non facciamo altro che andare a selezionare gli stessi elementi che andremmo a selezionare con la parola chiave odd.

Ci sono ancora poche cose da capire e dopo la loro lettura riuscirete a utilizzare queste pseudo-classi a vostro piacimento!

  • se a e b sono uguali o b è uguale a zero, b può essere omesso lasciando spazio alla espressione an, in questo caso se a è uguale a 3, questa espressione selezionerà soltanto ogni terzo elemento;
  • a uguale a 1, può essere omesso lasciando spazio all’espressione n+3;
  • a uguale a zero, vuol dire che vogliamo selezionare un unico elemento e che quindi l’espressione 0n+3 si potrà scrivere tranquillamente utilizzando il numero 3 e ci permetterà di selezionare solo e soltanto il terzo elemento di una lista.

Conclusioni

Adesso dovresti avere una miglior comprensione dell’uso di queste pseudo classi ed in particolar modo delle sue espressioni, ma ti invito ad utilizzare la sezione dei commenti se desideri avere dei chiarimenti o anche semplicemente qualche altro esempio pratico di questa tecnica!

Lascia il tuo Pensiero