Evidenziare righe alternate in una tabella CSS3

I selettori di CSS3 consentono di effettuare query complesse sugli elementi del DOM basandosi sulla loro gerarchia, così da poter applicare uno stile grafico senza dover necessariamente aggiungere un attributo ID o class.


La pseudo-classe :nth-child(expr) consente di determinare gli elementi in base alla loro posizione rispetto ai fratelli (siblings) nell'albero del documento. Specificando come espressione le costanti even e odd è possibile ottenere rispettivamente gli elementi pari e quelli dispari.
Nell'esempio di codice che segue alle righe 1, 3 e 5 della tabella (odd) verrà applicato uno sfondo rosso e alle righe 2, 4 e 6 (even) blu.

{codecitation class="brush: css; gutter: false;"}

Riga numero 1

Riga numero 2

Riga numero 3

Riga numero 4

Riga numero 5

Riga numero 6

{/codecitation}

È possibile utilizzare espressioni più complesse con an+b per ottenere tutti i nodi che abbiano an+b-1 fratelli che li precedono nella gerarchia (per n maggiore o uguale a zero). 
Di seguito alcuni esempi per chiarire meglio un concetto:

• al selettore :nth-child(1) corrisponde il primo nodo (equivale di fatto alla pseudo-classe :first-child;
• al selettore :nth-child(3n) corrispondono il terzo, il sesto, il nono, ecc. nodo; even equivale pertanto all'espressione 2n
• al selettore :nth-child(10n+9) corrispondono il nono, il diciannovesimo, il ventinovesimo, ecc. nodo; può anche essere espresso come :nth-child(10n-1); odd equivale pertanto all'espressione 2n-1

I selettori di CSS3 sono utilizzati, oltre che nei fogli di stile, anche per l'accesso agli elementi del DOM via JavaScript attraverso le nuove Selectors API di HTML5 o con framework come jQuery.

Potete scaricare un semplice esempio di pagina html usando questo stile