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:
- Punkt ein
- Punkt zwei
- Punkt drei
- Punkt vier
- Punkt fünf
- 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
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 :).
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:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details