Gestreifte Tabelle

Problem

Die Zeilen einer Tabelle sollen abwechselnd farbig hinterlegt werden.

Tabelle mit abwechselnd farbigen Zeilen
Tabelle mit abwechselnd farbigen Zeilen

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.

tr {
    background-color: cyan;
}
 
tr:nth-child(2n) {
    background-color: yellow;
}

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.

Mehr Infos