Righe pari e dispari

Per alternare lo sfondo delle righe di una tabella, si possono usare le seguenti due direttive:

tr:nth-child(even) {background: #CCC};
tr:nth-child(odd) {background: #FFF};

Le righe pari (even) avranno il colore grigio chiaro come sfondo, mentre le righe dispari (odd) avranno il colore bianco come sfondo.
Le due precedenti direttive possono essere applicate anche ad una lista, ad esempio:

li:nth-child(even) {font-weight: bold};

rende grassetto il testo delle righe pari nella lista.

Ora, per essere chiari, bisogna dire che le keyword even e odd si possono scrivere anche nel seguente modo:

tr:nth-child(2n+0) {background: #CCC};/*even row*/
tr:nth-child(2n+1) {background: #FFF};/*odd row*/

Spieghiamo meglio quello che abbiamo scritto, perché modificando i valori si possono ottenere effetti interessanti. Ad esempio, il 2n+0 significa “ogni due righe a partire dalla riga 0”, mentre 2n+1 significa “ogni due righe a partire dalla riga 1”. Ovviamente se scrivessi 5n+3 significherebbe che quella regola sarà applicata “ogni cinque righe a partire dalla terza”, ovvero alle righe 3,8,13,18,etc.

Colonne pari e dispari

Allo stesso modo si può gestire velocemente lo stile delle colonne di una tabella. Ad esempio la direttiva:

td:nth-child(2n+3) {background: #CCC};

colora lo sfondo in grigio chiaro ogni due colonne a partire dalla terza.

Altre keywords

Altre alle keywords viste prima, ci sono altre due pseudo-classi interessanti: first-child e last-child

Ad esempio:

td:first-child {background: #FF0};
td:nth-child(2n+3) {background: #CCC};
td:last-child {background: #F00};

colorerà lo sfondo della prima colonna in giallo, di grigio chiaro ogni due colonne a partire dalla terza e di rosso l’ultima.

Consiglio anche la lettura di CSS Tip & Trics con molti esempi su come usare i CSS in modo produttivo.

enjoy!