nth-child-Tester
:nth-child, :nth-of-type und :nth-last-child ausprobieren: Formel eingeben, Treffer live sehen und in Worten erklärt bekommen.
Der nth-child-Tester zeigt live, welche Elemente ein Selektor wie :nth-child(2n+1) trifft. Du gibst eine Formel ein, wählst zwischen :nth-child, :nth-last-child, :nth-of-type und :nth-last-of-type und bekommst die Treffer markiert, als Liste der Positionen und in Worten erklärt. Mit gemischten Elementen wird der Unterschied zu :nth-of-type sichtbar.
li:nth-child(2n+1): Jedes 2. Element, beginnend mit dem 1.
Treffer an Position: 1, 3, 5, 7, 9, 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
li:nth-child(2n+1) {
background: #dbeafe;
}Die nth-Pseudo-Klassen
| Selektor | Zählt | Richtung |
|---|---|---|
:nth-child() | Alle Geschwister | Vom Anfang |
:nth-last-child() | Alle Geschwister | Vom Ende |
:nth-of-type() | Nur gleicher Elementtyp | Vom Anfang |
:nth-last-of-type() | Nur gleicher Elementtyp | Vom Ende |
Häufige Formeln
| Formel | Trifft |
|---|---|
odd / 2n+1 | 1, 3, 5, 7 … |
even / 2n | 2, 4, 6, 8 … |
3n | 3, 6, 9 … |
-n+3 | Die ersten drei |
n+4 | Ab dem vierten |
Wie stark ein Selektor gewichtet wird, berechnest du im CSS-Spezifitäts-Rechner.
Häufige Fragen
Wie liest man An+B?
n zählt 0, 1, 2, 3 und so weiter. Für jedes n wird A·n+B ausgerechnet; alle Ergebnisse ab 1 sind die getroffenen Positionen. Bei 3n+1 sind das 1, 4, 7, 10 … Positionen beginnen bei 1, nicht bei 0.
Was ist der Unterschied zwischen :nth-child und :nth-of-type?
:nth-child zählt alle Geschwister, egal welcher Typ. p:nth-child(2) trifft nur, wenn das zweite Kind ein p ist. :nth-of-type zählt nur Geschwister desselben Typs: p:nth-of-type(2) ist immer der zweite Absatz.
Wie wähle ich die ersten oder letzten Elemente?
:nth-child(-n+3) trifft die ersten drei Elemente, :nth-last-child(-n+3) die letzten drei. :nth-child(n+4) trifft alles ab dem vierten Element.
Was bedeuten odd und even?
odd steht für ungerade Positionen (2n+1), even für gerade (2n). Typischer Einsatz sind Zebrastreifen in Tabellen: tr:nth-child(even).
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.