SMsoft – informatica e dintorni

CSS: Stile differenziato per righe e colonne pari o dispari

Colorare il contenuto di una tabella per evidenziare meglio il contenuto delle righe o colonne, può essere un’operazione noiosa se le modifiche allo stile delle righe e colonne viene fatto manualmente.
I CSS ci danno tanti strumenti potenti che spesso non vengono utilizzati per la non completa compatibilità con i browser e che restano non utilizzati anche quando queste funzionalità sono ormai supportate dalla maggior parte dei browser.
Parliamo oggi del selettore nth-child e lo facciamo con qualche esempio.

Righe pari e dispari

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

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:

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:

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:

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:

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!




Se hai trovato utili le informazioni su questo blog,
Fai una donazione!
Clicca sul bottone qui sotto o almeno clicca sul banner pubblicitario :-)
*

Commenti

Page optimized by WP Minify WordPress Plugin