Struktur-Pseudoklassen :nth-child(n)

Über die Struktur-Pseudoklassen kann auf ein sich wiederholendes Element zugegriffen werden – vereinfacht gesagt. Wer es präziser mag: Das n-te Kind eines Elternelements kann über CSS angesprochen werden.

Was macht man damit? Z.B. Tabellenreihen abwechselnd einfärben, um die Lesbarkeit zu erhöhen.

Hier der grundlegende Aufbau dieser CSS3-Anweisung:

:nth-child(n)

Natürlich müssen wir auch noch der CSS-Anweisung mitgeben, auf welches Element wir uns beziehen. Nehmen wir an, wir nutzen eine durchnummerierte Liste (ist einfach übersichtlicher als eine Tabelle – die machen wir später). Also haben wir folgenden HTML-Code:

<ol>
  <li>Punkt ein</li>
  <li>Punkt zwei</li>
  <li>Punkt drei</li>
  <li>Punkt vier</li>
  <li>Punkt fünf</li>
  <li>Punkt sechs</li>
  <li>Punkt sieben</li>
</ol>

Jetzt können wir über unsere CSS3-Anweisung :nth-child(n) beliebigen CSS-Code zuweisen. Damit es schnell sichtbar wird, geben wir in unserem Beispiel jedem zweiten Aufzählungspunkt eine orange Hintergrundfarbe mit.

Wer sich über diese Angabe „n“ wundert – diese ist ein Schlüsselwort und drauf können Rechenoperationen angewendet werden. Die Angabe „2n“ bedeutet dann, dass auf das zweite, vierte, sechste Element (und alle weiteren geraden, sofern vorhanden) unsere CSS-Anweisung angewendet wird.

<style>
  li:nth-child(2n) {
    background-color: orange;
}
</style>
<ol>
  <li>Punkt ein</li>
  <li>Punkt zwei</li>
  <li>Punkt drei</li>
  <li>Punkt vier</li>
  <li>Punkt fünf</li>
  <li>Punkt sechs</li>
</ol>

Somit hat der Punkt 2, 4 und 6 eine orange Hinterlegung:

Wir können die Rechenoperation natürlich ändern – einfach einmal „2n+3“ und „3n“ testen.

Abwechselnd mit even bzw. odd

Oft benötigt man genau diese abwechselnde (alternierende) Zugriffsmöglichkeit auf Elemente. Daher ist die einfachere CSS3-Anweisung even bzw. odd.

Sprich, CSS soll auf alle geraden (even) oder ungeraden (odd) Elemente zugreifen.

Unser Beispiel von oben, dass alle geraden Zeilen einfärbt, wäre dann:

li:nth-child(even) {
    background-color: orange;
}

Und wer die ungeraden Zeilen 1, 3, 5, und Folgende einfärben möchte:

li:nth-child(odd) {
    background-color: orange;
}

Um ein bisschen Irritation hier hereinzubringen – wir können unsere Elemente auch von hinten durchlaufen lassen. Dies läuft über die CSS3-Anweisung :nth-last-child(n).

Wir durchlaufen nun in 3er Schritten unsere 6 Listenelementen von hinten – es wird also Nr. 6 nicht, Nr. 5 nicht, Nr. 4 (ist das dritte von hinten), Nr. 3 nicht, Nr. 2 nicht, Nr. 1 wieder (ist wieder das dritte) farblich hinterlegt angezeigt über folgende CSS-Anweisung:

li:nth-last-child(3n){
    background-color: orange;
}

Tabellenreihen abwechselnd einfärben über CSS

Und nun das versprochene Tabellenbeispiel:

tr:nth-child(odd) {
    background-color: orange;
}

Und der dazugehörige HTML-Code:

<table id="beispieltabelle1">
  <tr>
    <td>1. Reihe, Zelle A</td>
    <td>1. Reihe, Zelle B</td>
  </tr>
  <tr>
    <td>2. Reihe, Zelle A</td>
    <td>2. Reihe, Zelle B</td>
  </tr>
  <tr>
    <td>3. Reihe, Zelle A</td>
    <td>3. Reihe, Zelle B</td>
  </tr>
  <tr>
    <td>4. Reihe, Zelle A</td>
    <td>4. Reihe, Zelle B</td>
  </tr>
  <tr>
    <td>5. Reihe, Zelle A</td>
    <td>5. Reihe, Zelle B</td>
  </tr>
  <tr>
    <td>6. Reihe, Zelle A</td>
    <td>6. Reihe, Zelle B</td>
  </tr>
</table>

Und so kommt es raus: