Con lo pseudo-selettore css nth:child è possibile effettuare l’individuazione e la selezione di elementi predefiniti via css. Tra cui la scelta di elementi pari o dispari. Il supporto browser purtroppo per IE è pari a zero (IE9+ lo supporta). Tuttavia questo selettore è implementato nelle librerie jQuery e, grazie quindi all’uso di queste, è possibile garantire la compatibilità anche su IE, è quindi ora di usarlo!
Vediamo subito una demo esemplificativa:
Lo pseudo-selettore nth:child
La sintassi per utilizzarlo è semplice:
ul li:nth-child(2n+1) {
background-color: #eee;
}In questo caso facciamo in modo che tutti gli elementi “dispari” della nostra lista abbiano un background grigio chiaro. Come è possibile? Il segreto risiede nella formula algebrica utilizzata. Scrivere infatti (2n+1) corrisponde a (2xn)+1, dove n è un numero intero che, partendo da 0, aumenta di un’unità per ogni elemento che incontra. Più precisamente avremo:
- (2×0)+1 = 1
- (2×1)+1 = 3
- (2×2)+1 = 5
e così via. Ne va da sè che possiamo usare valori qualsivoglia (se usiamo ad esempio 2n otterremo tutti gli elementi pari), e perfino selezionare elementi specifici indicando in parentesi unicamente l’intero che ci interessa “selezionare”. E’ bene far notare fin da ora che è possibile anche utilizzare valori negativi scrivendo ad esempio:-n+3, in questo modo però si selezionano solo alcuni elementi (se infatti il risultato dell’equazione è negativo non ottengo alcun effetto visivo):
- -0+3 = 3
- -1+3 = 2
- -2+3 = 1
Così facendo avremo selezionato solo i primi 3 elementi della nostra lista!
jQuery per risolvere i problemi di compatibilità
Come dicevamo, purtroppo da IE8 in giù questo selettore non viene riconosciuto. Tuttavia attraverso le librerie jQuery, con una sintassi molto semplice, è possibile risolvere facilmente il problema. Una volta incluse infatti le librerie, sarà sufficiente scrivere:
$(function(){
$('li:nth-child(2n+1)').css('background','#efefef');
});
Visto questo “salvataggio” jQueriano, direi che è giunto proprio il momento di iniziare ad utilizzare questo selettore senza troppe preoccupazioni no?
