HTML and CSS Reference
In-Depth Information
Iniziamo a elaborare un esempio, così da capire la potenza applicata ai selettori CSS, quan-
do utilizzati in maniera estesa. Per esempio, possiamo utilizzare un semplice selettore per
applicare un colore alternato alle righe di una tabella. Questa cosa non era possibile prima
di CSS3 senza intervenire sul markup generato, applicando alternativamente un colore di
sfondo.
L'esempio 4.11
contiene, invece, il codice necessario per raggiungere lo stesso sco-
po con CSS3.
Esempio 4.11
- HTML
<table>
<tr><td>Riga #1</td></tr>
<tr><td>Riga #2</td></tr>
<tr><td>Riga #3</td></tr>
<tr><td>Riga #4</td></tr>
</table>
Esempio 4.11
- CSS
tr:nth-child(odd) {
background: #c0c0c0;
}
tr:nth-child(even) {
background: #999999;
}
Quando lanciato nel browser, l'effetto di questo CSS sarà quello visibile nella
figura 4.3
.
Figura 4.3
- Creare righe alternate con CSS3 diventa molto semplice.
