Gestreifte Tabelle

Lösung

Eine schöne Lösung, da sie keine zusätzlichen CSS-Klassen im HTML-Markup der Tabelle benötigt, ist die Verwendung des Pseudo-Selektors :nth-child().

Mit :nth-child() kann man mithilfe eines mathematischen Ausdrucks ganz bestimmte Vorkommen eines Elements auswählen. Dieser mathematische Ausdruck wird in den runden Klammern notiert. Im einfachsten Fall wäre dies z. B. :nth-child(2). Dies würde genau das 2. Element seiner Art auswählen. Nun wollen wir aber nicht nur die 2. Tabellenzeile allein selektieren, sondern auch die Zeilen 4, 6, 8 und so weiter. Dies erreichen wir zum Beispiel mit dem Ausdruck :nth-child(2n). Für n werden dabei vom Browser positive Ganzzahlen ab 0 eingesetzt. 2n, also "2 mal n", bedeutet demnach, wähle Element 2, 4, 6, 8 usw. aus:

2 x 0 = 0 (kein übereinstimmendes Element)
2 x 1 = 2
2 x 2 = 4
2 x 3 = 6
2 x 4 = 8
...

Obwohl man es aufgrund des Namens vermuten könnte, wird :nth-child() nicht beim Elternelement notiert. Vielmehr sieht sich jedes Element selbst aus der Kind-Perspektive (so wie p:only-child auch bedeutet: "alle p, die das einzige Kind ihres Elternelements sind"). Im Beispiel des Zeilenwechsels ergibt sich als Selektor demnach tr:nth-child(2n) - jedes 2. tr.

Für alle ungeraden Zeilen wird nun direkt auf tr die gewünschte Hintergrundfarbe gesetzt. Allen geraden wird per tr:nth-child(2n) die alternierende Hintergrundfarbe zugewiesen.

Demo ansehen

Weiterhin könnte man jede 3. Zeile mit dem Ausdruck 3n auswählen:

3 x 0 = 0 (kein übereinstimmendes Element)
3 x 1 = 3
3 x 2 = 6
3 x 3 = 9
3 x 4 = 12
...

...jede 4. mit 4n, jede 5. mit 5n und so weiter. Es geht aber auch noch komplexer: Möchte man beispielsweise die Zeilen 1, 4, 7, 10 (jede 3. Zeile, beginnend ab einschließlich der 1.) auswählen, ist der Ausdruck 3n–2 passend:

(3 x 0) – 2 = –2 (kein übereinstimmendes Element)
(3 x 1) – 2 = 1
(3 x 2) – 2 = 4
(3 x 3) – 2 = 7
(3 x 4) – 2 = 10
...

Genauso richtig wäre auch 3n+1:

(3 x 0) + 1 = 1
(3 x 1) + 1 = 4
(3 x 2) + 1 = 7
(3 x 3) + 1 = 10
...

Sollen nur die Zeilen 1, 2, 3 ausgewählt werden, kann man sich mittels -n+3 zu Nutze machen, dass negative Ergebnisse nicht angezeigt werden:

0 + 3 = 3
–1 + 3 = 2
–2 + 3 = 1
–3 + 3 = 0 (kein übereinstimmendes Element)
–4 + 3 = –1 (kein übereinstimmendes Element)
...

Am besten selbst ausprobieren - zum Beispiel mit dem nth-Tester von CSS-Tricks. Für "gerade" und "ungerade" gibt es übrigens auch eine Kurzschreibweise: even und odd, also z. B. :nth-child(even), um alle geradzahligen Elemente (2, 4, 6, 8) zu selektieren.