nth-child: Fortgeschrittene Formeln

1. Warum odd und even nur die Oberfläche von nth-child sind

Die Pseudoklasse nth-child wird in den meisten Tutorials auf zwei Schlüsselwörter reduziert: odd für ungerade und even für gerade Positionen, meistens demonstriert an Zebra-Streifen in Tabellen. Diese beiden Schlüsselwörter sind aber nur benannte Abkürzungen für die eigentliche, deutlich mächtigere Syntax dahinter, eine lineare Formel der Form An+B, die praktisch jedes beliebige, sich wiederholende Muster über eine Liste von Geschwistern ausdrücken kann.

Wer nur odd und even kennt, greift bei komplexeren Anforderungen, etwa jedes dritte Element ab dem fünften oder alle Elemente außer den letzten beiden, meist zu JavaScript oder zusätzlichen Klassen im Markup. Dabei lässt sich mit nth-child und der zugrunde liegenden Formel nahezu jede numerische Positionsbedingung direkt im Selektor ausdrücken. Die folgenden Abschnitte zeigen, wie die Formel funktioniert und welche praxisrelevanten Muster sich daraus ableiten lassen.

2. Die An+B Formel Schritt für Schritt erklärt

Die Formel hinter nth-child lautet An+B, wobei n für jede nicht negative Ganzzahl beginnend bei null steht, A die Schrittweite zwischen den Treffern bestimmt und B einen Offset addiert. nth-child(3n+1) berechnet für n=0,1,2,3... die Positionen 1, 4, 7, 10 und so weiter, weil jedes Mal drei zur vorherigen Position addiert wird, beginnend bei eins. Das Verständnis dieser Rechnung ist der Schlüssel, um nth-child für beliebige Muster einzusetzen, statt sich auf vorgefertigte Schlüsselwörter zu verlassen.

Negative Werte für A sind ebenfalls gültig und drehen die Zählrichtung effektiv um: nth-child(-n+3) berechnet die Positionen 3, 2, 1 und stoppt dort, weil negative Positionen nicht existieren, was in der Praxis genau die ersten drei Elemente selektiert. Diese Eigenschaft macht -n+X zu einem der nützlichsten Bausteine für Bereichsauswahl mit nth-child, deutlich kompakter als eine lange Aufzählung einzelner Positionen.

/* A = 3, B = 1: positions 1, 4, 7, 10, ... */
li:nth-child(3n+1) {
  font-weight: bold;
}

/* Negative A effectively selects "the first N" elements */
li:nth-child(-n+3) {
  color: #7c3aed;
}

/* A = 0 behaves like an exact position (equivalent to nth-child(5)) */
li:nth-child(0n+5) {
  background: #f5f3ff;
}

/* Classic odd/even are just named shortcuts for 2n+1 and 2n */
tr:nth-child(odd)  { background: #f8fafc; }  /* same as 2n+1 */
tr:nth-child(even) { background: #ffffff; }  /* same as 2n   */

3. Rezept: Bereiche auswählen, erste und letzte N ausschließen

Ein häufiger Anwendungsfall ist die Auswahl eines Bereichs innerhalb einer Liste, etwa alle Elemente zwischen Position vier und acht. Mit nth-child lässt sich das durch die Kombination zweier Formeln in einem Selektor lösen: li:nth-child(n+4):nth-child(-n+8) trifft genau auf die Positionen vier bis acht, weil die erste Formel alles ab Position vier erfasst und die zweite Formel alles bis Position acht begrenzt. Der Schnittpunkt beider Bedingungen ergibt den gewünschten Bereich.

Ein zweites verbreitetes Muster ist das Ausschließen der ersten und letzten Elemente einer Liste, etwa wenn Trennlinien zwischen Einträgen erscheinen sollen, aber nicht vor dem ersten oder nach dem letzten Eintrag. li:not(:first-child):not(:last-child) löst das direkt, während li:nth-child(n+2) allein bereits das erste Element ausschließt, wenn kein zusätzlicher Endpunkt gebraucht wird. Diese Bereichsmuster mit nth-child ersetzen viele Fälle, die sonst eine zusätzliche CSS-Klasse am ersten oder letzten Markup-Element erfordern würden.

/* Select exactly positions 4 through 8 */
li:nth-child(n+4):nth-child(-n+8) {
  background: #ede9fe;
}

/* Separator lines between items, but not before the first or after the last */
li:not(:first-child) {
  border-top: 1px solid #e2e8f0;
}

/* Fade out the last three items in a preview list */
li:nth-last-child(-n+3) {
  opacity: 0.5;
}

4. nth-last-child: Rückwärtszählung richtig nutzen

nth-last-child verwendet dieselbe An+B Mathematik wie nth-child, zählt aber vom Ende der Geschwisterliste statt vom Anfang. Das macht es zum idealen Werkzeug für Muster, die von der Gesamtanzahl der Elemente abhängen, ohne diese Anzahl explizit zu kennen. li:nth-last-child(-n+3) selektiert immer die letzten drei Elemente, unabhängig davon, ob die Liste insgesamt fünf oder fünfzig Einträge enthält, weil die Zählung stets relativ zum Ende erfolgt.

Ein besonders elegantes Muster kombiniert nth-child und nth-last-child, um ein Element in der exakten Mitte einer Liste zu finden, unabhängig von deren Länge: li:nth-child(odd):nth-last-child(odd) trifft nur auf Listen mit ungerader Gesamtlänge zu und markiert dort automatisch das mittlere Element, weil nur die exakte Mitte sowohl von vorne als auch von hinten eine ungerade Position hat. Diese Technik funktioniert komplett ohne JavaScript und ohne die Länge der Liste im Voraus zu kennen.

/* Always the last three items, regardless of total list length */
li:nth-last-child(-n+3) {
  border-color: #7c3aed;
}

/* Find the exact middle element of an odd-length list */
li:nth-child(odd):nth-last-child(odd) {
  font-weight: 700;
  color: #6d28d9;
}

/* Last row of a grid needs no bottom border */
.grid-item:nth-last-child(-n+3) {
  border-bottom: none;
}

5. Die of S Syntax: gefilterte Zählung verstehen

Die erweiterte Syntax nth-child(An+B of S) fügt der Formel einen zusätzlichen Filter hinzu: statt alle Geschwister zu zählen, werden nur diejenigen gezählt, die zusätzlich dem Selektor S entsprechen. li:nth-child(2n of .featured) zählt ausschließlich die Elemente mit der Klasse featured und wählt davon jedes zweite aus, unabhängig davon, an welchen absoluten Positionen sich diese Elemente innerhalb der gesamten Liste befinden.

Diese Syntax löst ein Problem, das mit klassischem nth-child allein nicht lösbar war: die Positionszählung innerhalb einer gefilterten Teilmenge statt der kompletten Geschwisterliste. Vor der of S Syntax musste man entweder ein zusätzliches Wrapper-Element pro Kategorie einführen oder auf JavaScript zurückgreifen, um beispielsweise jedes zweite hervorgehobene Produkt in einer gemischten Produktliste zu markieren. Der Browser-Support für of S ist mittlerweile in allen aktuellen Evergreen-Browsern gegeben.

/* Count only elements matching .featured, then select every 2nd of those */
li:nth-child(2n of .featured) {
  outline: 2px solid gold;
}

/* First 2 featured items in a mixed list, regardless of absolute position */
li:nth-child(-n+2 of .featured) {
  transform: scale(1.05);
}

6. Rezept: Grid-Layouts mit Zeilenumbruch-Logik

In CSS-Grid-Layouts mit fester Spaltenzahl ist nth-child das Standardwerkzeug, um Elemente am Zeilenanfang oder Zeilenende gezielt zu stylen, etwa um horizontale Trennlinien nur zwischen Zeilen, nicht aber zwischen Spalten einzufügen. Bei einem Grid mit vier Spalten selektiert .item:nth-child(4n+1) immer das erste Element jeder Zeile, was für linksbündige Zusatzstile oder das Entfernen eines linken Randes am Zeilenanfang nützlich ist.

Ein verwandtes Muster betrifft variable Randlinien: .item:not(:nth-child(4n)) fügt einen rechten Rand bei allen Elementen außer dem letzten einer jeden Zeile hinzu, sodass am Zeilenende keine überflüssige Linie entsteht. Diese Technik ist deutlich robuster als das manuelle Setzen von Klassen im Markup, weil sie automatisch mit der tatsächlichen Position im DOM synchron bleibt, selbst wenn sich die Anzahl der Elemente durch dynamisch geladenen Content ändert.

7. nth-child vs. nth-of-type: der entscheidende Unterschied

nth-child zählt alle Geschwisterelemente unabhängig vom Tag-Namen, während nth-of-type nur Geschwister desselben Tag-Namens zählt. Der Unterschied wird relevant, sobald verschiedene Elementtypen gemischt im selben Container stehen: in einem Container mit abwechselnden h3- und p-Elementen zählt p:nth-child(2) die absolute Position unter allen Kindern, während p:nth-of-type(2) das zweite p-Element zählt, unabhängig davon, wie viele h3-Elemente dazwischen liegen.

Dieser Unterschied ist eine häufige Fehlerquelle: Entwickler erwarten oft das Verhalten von nth-of-type, verwenden aber versehentlich nth-child, was bei gemischtem Markup zu falschen Treffern führt. Die Faustregel: nth-of-type nutzen, sobald mehrere unterschiedliche Elementtypen als Geschwister vorkommen und nur ein bestimmter Typ gezählt werden soll, nth-child nutzen, sobald tatsächlich die absolute Geschwisterposition zählt, etwa in einer homogenen Liste aus ausschließlich li-Elementen.

8. Rezept: Paginierungsgruppen und Trennlinien

Ein praxisnahes Rezept für nth-child ist die visuelle Gruppierung von Paginierungs-Buttons oder langen Listen in Blöcke, etwa das Einfügen einer visuellen Trennung nach jeweils fünf Einträgen. li:nth-child(5n)::after { content: ""; display: block; margin-block: 0.5rem; border-bottom: 1px solid #e2e8f0; } fügt automatisch nach jedem fünften Element eine Trennlinie ein, ohne dass die Gruppierung im Markup nachgebildet werden muss.

Für Tabellen mit vielen Zeilen lässt sich dasselbe Prinzip nutzen, um alle fünf oder zehn Zeilen eine dickere Trennlinie einzuziehen und so die Lesbarkeit langer Datensätze zu verbessern, ein Muster, das man aus gedruckten Tabellenkalkulationen kennt. tr:nth-child(10n) markiert jede zehnte Zeile mit einer verstärkten unteren Umrandung, was besonders bei Tabellen mit hunderten Zeilen die Orientierung deutlich erleichtert, ganz ohne zusätzliche Gruppierungs-Logik im Backend.

9. nth-child Formeln im direkten Vergleich

Die folgende Tabelle zeigt gängige Anforderungen und die passende nth-child Formel dafür, als schnelle Referenz für den Projektalltag.

Die Kombination mehrerer nth-child Selektoren als Schnittmenge, wie im Bereichsbeispiel gezeigt, ist der Schlüssel zu komplexeren Mustern. Statt eine einzelne, komplizierte Formel zu suchen, lassen sich fast alle Anforderungen aus einfachen, gut verständlichen Teilformeln zusammensetzen.

10. Zusammenfassung

nth-child ist deutlich mehr als odd und even: die zugrunde liegende An+B Formel erlaubt beliebige Schrittweiten, Offsets und über negative Werte auch Bereichsauswahl. nth-last-child zählt dieselbe Formel rückwärts vom Ende der Liste, was Muster ermöglicht, die unabhängig von der Gesamtanzahl der Elemente funktionieren. Die of S Syntax fügt eine gefilterte Zählung hinzu, die Positionsauswahl innerhalb einer Teilmenge statt der kompletten Geschwisterliste erlaubt.

Wer diese Formeln beherrscht, kann Grid-Zeilenumbrüche, Paginierungsgruppen, Bereichsauswahl und Positions-Filterung direkt im Selektor ausdrücken, ohne zusätzliche Klassen im Markup zu pflegen. Der Unterschied zwischen nth-child und nth-of-type bleibt dabei die häufigste Fehlerquelle und sollte bei gemischtem Markup immer bewusst geprüft werden, bevor eine Formel als fertig gilt.

11. FAQ: nth-child Formeln