CSS: tabelle e selettori CSS3

Il nuovo selettore CSS3 :nth-child() (una pseudo-classe strutturale) ci permette di selezionare un elemento figlio in base alla sua posizione nell'albero del DOM. Si supponga di avere una tabella con quattro intestazioni e dieci righe. Vogliamo che le intestazioni pari abbiano degli stili diversi da quelle dispari in modo alternato. Inoltre vogliamo che le celle di tabella si alternino per colore del testo e sfondo in modo da formare due gruppi di colonne. Vediamo l'implementazione.

La struttura HTML di base:

<table>

	<tr>
	
		<th scope="col">Intestazione</th>
		<th scope="col">Intestazione</th>
		<th scope="col">Intestazione</th>
		<th scope="col">Intestazione</th>
		
	
	</tr>
	
	<tr>
	
	  <td>Dati</td>
	  <td>Dati</td>
	  <td>Dati</td>
	  <td>Dati</td>
	
	</tr>
	
	<!-- altre 9 righe -->
</table>

Il CSS di base:

table {
	width: 400px;
	margin: 0 auto;
	border-collapse: collapse;
	border: 2px solid #444;
}

th, td {
	width: 100px;
	padding: 10px;
	border: 1px solid #888;
}

th {
	text-align: left;
}

Ora le intestazioni. Iniziamo da quelle pari:

tr th:nth-child(even) {
	background: #d34545;
	color: #fff;
}

even sta per pari ed è una parola chiave passata alla pseudo-classe in questione. Ora le intestazioni dispari:

tr th:nth-child(odd) {
	background: #c0c0c0;
}

odd sta per dispari. Ora passiamo alle celle di tabella pari:

tr td:nth-child(even) {
	background: #333;
	color: #fff;
}

Infine alle celle di tabella dispari:

tr td:nth-child(odd) {
	background: #ffc;
}

Abbiamo ottenuto un effetto di alternanza che riproduce il design di una tabella con colonne dal colore di sfondo diverso. Potete visionare l'esempio finale in questa pagina.