Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

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 wie 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 zweitem 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 hab der Punkt 2, 4 und 6 eine orange Hinterlegung:

  1. Punkt ein
  2. Punkt zwei
  3. Punkt drei
  4. Punkt vier
  5. Punkt fünf
  6. Punkt sechs

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 einfacher CSS3-Anweisung even bzw. odd.

Sprich CSS soll auch 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 Zeile 1, 3, 5, usw. einfärben möchte:

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

Um ein bisschen Irritation hier hereinzubringen – wir können unsere Elemente auch von hintern durchlaufen. 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 ja (ist das dritte), Nr. 3 nicht, Nr. 2 nicht, Nr. 1 ja (ist wieder das dritte) farblich hinterlegt ü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:

1. Reihe, Zelle A 1. Reihe, Zelle B
2. Reihe, Zelle A 2. Reihe, Zelle B
3. Reihe, Zelle A 3. Reihe, Zelle B
4. Reihe, Zelle A 4. Reihe, Zelle B
5. Reihe, Zelle A 5. Reihe, Zelle B
6. Reihe, Zelle A 6. Reihe, Zelle B