Il suggerimento di questo numero riguarda l'uso della pseudo-classe nth-child
che può essere utilizzata per esempio per migliorare la leggibilità di tabelle contenenti una grande mole di
dati, colorando le righe in modo alternato.
Per esempio, la tabella sotto ha un grigio chiaro di sfondo per le righe pari e un bianco per quelle dispari.
Le regole per ottenere questo sono molto semplici:
tr:nth-child(even) {background: #ccc;}
tr:nth-child(odd) {background: #fff;}
In realtà, i CSS non permettono solo l'alternanza pari/dispari, ma consentono d'impostare un'alternanza a intervalli regolari.
Le keyword "even" (pari) e "odd" (dispari) sono solo comode scorciatoie. Per esempio, per una lunga lista si potrebbe fare così:
li:nth-child(4n+2) {font-weight: bold}
La regola scritta sopra ci dice che ogni 5 elementi della lista uno é in grassetto, a partire dal secondo. In altre parole,
gli elementi con numero 2, 6, 10, 14, 18, etc., saranno in grassetto.
Possiamo giá utilizzare questa pseudo-classe? Le ultime versioni dei principali browser, ad eccezion fatta per il solito
Internet Explorer, supportano giá la pseudo-classe "nth-child".
Indice dei contenuti
|