Zur Erhöhung der Übersichtlichkeit lassen sich alternierende Hintergrundfarben für Tabellenzeilen, Listenelemente etc. einsetzen. Dieser Artikel beschreibt die Problematik der Umsetzung im Markup und stellt die Umsetzung per CSS vor.
Zur alternierenden Färbung könnte an Elemente mit gerader (oder ungerader; beides ist nicht notwendig) Nummer eine Klasse vergeben werden:
<table>
<tbody>
<tr> <th>1</th> <td>eins</td> </tr>
<tr class="even"> <th>2</th> <td>zwei</td> </tr>
<tr> <th>3</th> <td>drei</td> </tr>
<tr class="even"> <th>4</th> <td>vier</td> </tr>
<tr> <th>5</th> <td>fünf</td> </tr>
<tr class="even"> <th>6</th> <td>sechs</td> </tr>
<tr> <th>7</th> <td>sieben</td> </tr>
</tbody>
</table>
Im Stylesheet:
tr { background-color: #FCC }
tr.even { background-color: #CCF }
Dies hat jedoch den Nachteil, dass bei Änderungen (Hinzufügen oder Entfernen von Elementen) die Klassen neu vergeben werden müssen, wenn sie nicht durch ein serverseitiges Script generiert werden.
CSS 3 bietet mit der Pseudoklasse :nth-child die Möglichkeit, dieses Styling auch ohne zusätzliches Markup zu realisieren.
<table>
<tbody>
<tr> <th>1</th> <td>eins</td> </tr>
<tr> <th>2</th> <td>zwei</td> </tr>
<tr> <th>3</th> <td>drei</td> </tr>
<tr> <th>4</th> <td>vier</td> </tr>
<tr> <th>5</th> <td>fünf</td> </tr>
<tr> <th>6</th> <td>sechs</td> </tr>
<tr> <th>7</th> <td>sieben</td> </tr>
</tbody>
</table>
Im Stylesheet:
tr:nth-child(odd) { background-color: #FCC }
tr:nth-child(even) { background-color: #CCF }
Nicht nur Wiederholungen aller 2 Elemente sind möglich, sondern aller a Elemente. Beispiel für a = 3:
tr:nth-child(3n) { background-color: #CCF }
tr:nth-child(3n+1) { background-color: #FCC }
tr:nth-child(3n+2) { background-color: #CFC }
Anmerkung: In Internet Explorer bis Version 7 ließen sich Zebrastreifen mit CSS-Expressions realisieren. Diese alten Versionen sind mitlerweile irrelevant; Nostalgiker können das aber noch in der alten Version dieses Artikels nachlesen.