Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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:

  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 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:

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

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe