Selettore di attributo css3 :nth-child

La potenza dei selettori I nuovi selettori di attributo sono davvero molto potenti. Grazie ad essi riusciamo ad intervenire in […]
Selettore di attributo css3 :nth-child

La potenza dei selettori

I nuovi selettori di attributo sono davvero molto potenti. Grazie ad essi riusciamo ad intervenire in maniera precisa e non invasiva nel markup, in quanto consentono di intercettare con molta facilità qualsiasi elemento all’interno della nostra pagina web senza l’aggiunta di attributi class o id.

In particolare il selettore di attributo :nth-child(an+b) ti consente di intercettare l’ennesimo figlio di un ipotetico elemento padre, ma anche a tutti quegli elementi che soddisfano le condizioni imposte dai parametri che il selettore porta con se.

Vediamolo in azione!

In questo primo esempio concreto andiamo a selezionare in una semplice lista ordinata il secondo elemento “li”, che verrà colorato di rosso per distinguerlo dagli altri.

/*In questa prima variante definiamo essattamente il child da formattare*/
ul li:nth-child(2) {color:red;}
<ul>
    <li>Voce Uno</li>
    <li>Voce Due</li>
    <li>Voce Tre</li>
</ul>

La frequenza e lo scostamento

Qui il gioco si fa interessante. Introduciamo quindi i due parametri an+b del nostro selettore che ci consentiranno di intervenire in maniera ancora piu specifica nel markup. La frequenza rappresenta ogni quante posizioni dobbiamo applicare lo stile, mentre lo scostamento è a partire da quando dobbiamo applicarlo, se dal primo elemento, o dal secondo e cosi via. I due parametri possono anche essere definiti separatamente, come nel primo esempio in cui abbiamo solo definito lo scostamento, ma avremmo potuto anche definire solo “an”.

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

Ecco come si potrebbe letteralmente interpretare la seguente espressione:
2n+1 == “Applica la regola ogni 2 elementi a partire dal primo”

Cosa ti suggerisce quest’esempio? Se lo applicassimo ad una tabella? Proprio cosi, otterremo tutte le righe dispari con una formattazione diversa rispetto a quelle pari e tra un po di tempo potremmo anche dire addio a php e javascript per questo tipo di cose!!!

Poichè i casi di applicazione inerenti al pari o dispari sembrano essere i più frequenti è stata introdotta una sintassi più friendly … “even” e “odd” che tradotti indicano pari e dispari. Avremo quindi:

ul li:nth-child(even) {color:red;}
ul li:nth-child(odd) {color:green;}

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github