E:nth-child(n)
filtert das n-te Kindelement eines HTML-Elements
nth-child ist eine Pseudoklasse (einfacher Doppelpunkt) und steht immer am Ende der Selektor-Kette. Runde Klammern kennzeichnen eine CSS-Funktion: Vor der öffnenden runden Klammer darf kein Leerzeichen stehen.
li:nth-child(3) { background:blue }
E:nth-last-child(n)
wie nth-child, aber beginnt am Ende
li:nth-last-child(3) { background: blue }
:nth-child(odd), nth-child(even)
Tabellenzeilen lassen sich mit einem geringen Aufwand abwechselnd einfärben – das verbessert die Lesbarkeit in langen Tabellen.
tr:nth-child(odd) { background: gainsboro; } tr:nth-child(even) { background: ivory; }
Klassen- und Id-Selektoren | Die ältesten und zuverlässigsten Selektoren |
Pseudo-Elemente | Zustände von HTML-Elementen filtern |
CSS Pseudo-Klassen | Besonders interessant für Listen und Tabellen |
Attribut-Selektoren | Filtern HTML-Elemente anhand ihrer Attribute |
Kontext-Selektoren | Wählen HTML-Elemente anhand ihrer relativen Position innerhalb der Struktur |
Formel für nth-child
Jede vierte Zelle in jeder Zeile einer Tabelle, beginend beim ersten Element (1, 5, 9, 13, 17, …).
.week td:nth-child(4n + 1) { background-color: #efefef }
Mo | 29364 | 283 | 276 | Mo | 27836 | 272 | 290 | Mo | 21743 | 238 | 276 |
Di | 45753 | 267 | 289 | Di | 36059 | 253 | 297 | Di | 30823 | 208 | 267 |
Mi | 67186 | 273 | 282 | Mi | 69601 | 253 | 290 | Mi | 51301 | 198 | 255 |
Do | 73209 | 229 | 282 | Do | 70611 | 194 | 295 | Do | 56677 | 183 | 250 |
Fr | 74352 | 267 | 288 | Fr | 61288 | 228 | 285 | Fr | 50968 | 186 | 250 |
Sa | 64346 | 246 | 288 | Sa | 53697 | 229 | 284 | Sa | 42813 | 181 | 238 |
So | 42055 | 258 | 290 | So | 32646 | 241 | 297 | So | 29348 | 199 | 237 |
Wenn jedes dritte Element einer Reihe gefiltert werden soll, und zwar beginnend mit dem zweiten Element, liefert eine Formel das Element ans CSS.
a + ( n - 1 ) * d
| | |
| | +-- Abstand (»jedes 3. Element«)
| |
| +-- Multiplikator
|
+-- erstes Element (Beispiel beginnt beim 2. Element)
a + ( n - 1 ) * d
= 2 + ( n - 1 ) * 3
= 2 + ( 3n - 3)
= 2 + 3n - 3
= 3n - 1
li:nth-child(3n-1) {
background: red;
}
nth-of-type(n)
wie nth-child, wirkt aber nur bei Elementen eines Typs. Auch hier gilt: n kann entweder eine Zahl für den Index, das Schlüsselwort odd oder even oder eine Formel sein.
p:nth-of-type(odd){
background:orange
}
<div class="dbox"> <ul> <li></li> <li></li> </ul> <p></p> <p></p> <p></p> <p></p> <div></div> <div></div> </div>
- li
- li
p
p
p
p
nth-last-of-type(n)
wie nth-of-type, aber zählt vom Ende an und wirkt nur bei einem bestimmten Typ von Element. Und natürlich auch hier: n kann entweder eine Zahl für den Index, das Schlüsselwort odd oder even oder eine Formel sein.
p:nth-last-of-type(3) {background:orange}
- li
- li
p
p
p
p