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?