Efekt „Zebra” polega na ustawieniu naprzemiennie dwóch kolorów dla pewnych elementów HTML. Może to zdecydowanie poprawić czytelność. Wprowadzona w CSS3 pseudoklasa :nth-child pozwala znacznie zmniejszyć nakład pracy wymagany do uzyskania efektu „Zebra”. Pseudoklasa ta ma wiele możliwości wskazywania elementów, w tym przypadku wystarczą proste even (parzyste) lub odd (nieparzyste).

Przykład efektu „Zebra” to tabela na końcu artykułu.

Kod CSS

tr:nth-child(odd){background:#eee;}
table{width:100%;}
td{padding:10px;}
th{background: #000;color: #fff;}

Kod HTML

<table>
	<tr>
		<th>Data</th>
		<th>Miejsce</th>
	</tr>
	<tr>
		<td>1–7.09</td>
		<td>Westerplatte</td>
	</tr>
<!-- kolejne wiersze -->
</table>

Bitwy kampanii wrześniowej