Come creare righe a colori alternati
Per colorare le righe di una tabella html <table> o un elenco di voci puntato <ul> con colori alternati o diversi, utilizzo la pseudoclasse nth-child nel foglio di stile Css della pagina web. Ogni riga viene colorata con un colore differente.
La sintassi
[child]:nth-child([even|odd]) {
background-color: [colore];
}
I parametri della proprietà nth-child sono due:
- even intercetta le righe pari
- odd intercetta le righe dispari
La proprietà nth-child intercetta l'ennesimo elemento figlio ( child ) di un contenitore ( es. <tr>, <li>, <p>).
| riga 1 |
| riga 2 |
| riga 3 |
| riga 4 |
| riga 5 |
Poi gli assegna un foglio di stile personalizzato. In questo caso, applica un colore di sfondo differente modificando la proprietà background-color.
Il contenitore ( parent ) può essere un elenco puntato <ul> o numerato <ol>, una tabella <table>, un <div>, ecc.
Nota. La classe funziona anche per alternare i paragrafi <p> e qualsiasi altro tag html, posto all'interno di un contenitore <div> specifico o più in generale <body>.
Un esempio pratico
Esempio 1
Ho la seguente tabella html:
| riga 1 |
| riga 2 |
| riga 3 |
| riga 4 |
| riga 5 |
Voglio alternare i colori delle righe:
Quindi definisco nel foglio di stile Css una classe "sorgente" per l'elemento figlio <tr> sia per le righe pari ( even ) che dispari ( odd ) con colori differenti.
.sorgente tr:nth-child(even) { background-color: #CCCCCC; }
.sorgente tr:nth-child(odd) { background-color: #F0F0F0; }
Poi applico la classe sorgente al contenitore (parent) ossia alla tabella <table>.
<table class=sorgente>
<tr><td>riga</td></tr>
<tr><td>riga</td></tr>
<tr><td>riga</td></tr>
<tr><td>riga</td></tr>
</table>
Il risultato finale è il seguente:
| riga 1 |
| riga 2 |
| riga 3 |
| riga 4 |
| riga 5 |
Ho così creato una tabella html a righe alternate.
Esempio 2
Ho un elenco di voci puntate
- riga 1
- riga 2
- riga 3
- riga 4
- riga 5
Per colorare soltanto le righe pari (even) creo una classe in Css con la proprietà nth-child sul tag child <li>
.righepari li:nth-child(even) { background-color: #CCCCCC; }
Poi applico la classe al contenitore parent <ul>.
<ul class="righepari">
<li>riga</li>
<li>riga</li>
<li>riga</li>
<li>riga</li>
<li>riga</li>
</ul>
Sul browser la tabella è colorata a righe alternate
- riga
- riga
- riga
- riga
- riga
Ho così colorato un elenco con colori diversi.
Come colorare in modo diverso le righe multiple
La proprietà nth-child mi permette anche di colorare soltanto le righe multiple di un numero, non solo quelle pari o dispari.
Esempio
Questa classe colora soltanto le righe multiple di 3.
tr:nth-child(3n + 0) { background-color: #CCCCCC; }
Il risultato finale è il seguente
| riga 1 |
| riga 2 |
| riga 3 |
| riga 4 |
| riga 5 |
| riga 6 |
Come colorare soltanto le prime righe
Per applicare la proprietà nth-child soltanto alle prime righe di un contenitore, utilizzo un contatore negativo più una costante positiva uguale al numero delle righe.
Esempio
Questa classe cambia colore soltante alle prime tre righe.
tr:nth-child(-n + 3) { background-color: #CCCCCC; }
Il risultato finale è il seguente
| riga 1 |
| riga 2 |
| riga 3 |
| riga 4 |
| riga 5 |
| riga 6 |
| riga 7 |
Ogni riga decrementa il contatore di -1.
In questo caso 3, 2, 1 ... alla quarta riga il contatore è zero (0).
Non esistendo nessuna riga zero o negativa, la proprietà nth-child non è più applicata sulle righe successive.
E così via.
