:nth-child und :nth-of-type
Wählen Sie Elemente anhand ihrer Position in einem Elternelement mit nth-Formeln und Typselektoren aus.
:nth-child und :nth-of-type ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind strukturelle Pseudoklassen?
Strukturelle Pseudoklassen wählen Elemente anhand ihrer Position innerhalb des übergeordneten Elements aus. Dadurch müssen Sie keine Klassen oder JavaScript hinzufügen, um bestimmte untergeordnete Elemente anzusprechen.
:first-child und :last-child
Wählen Sie das erste oder letzte untergeordnete Element eines übergeordneten Elements aus:
<ul><li>First item (no top border)</li><li>Middle item</li><li>Last item (no bottom margin)</li></ul>
Grundlagen von :nth-child()
:nth-child(n) wählt Elemente anhand ihrer Position (beginnend bei 1) unter gleichgeordneten Elementen beliebigen Typs aus.
<ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>
:nth-child() mit Schlüsselwörtern
Verwenden Sie die Schlüsselwörter odd oder even, um abwechselnde Zeilen zu gestalten:
<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>
:nth-child() mit Formeln
Verwenden Sie die Formel An+B, wobei A für den Schritt und B für den Versatz steht. n beginnt bei 0 und wird schrittweise erhöht.
3n– jedes dritte Element (3, 6, 9 ...)3n+1– das erste von jeweils drei Elementen (1, 4, 7 ...)-n+3– nur die ersten drei Elemente
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
:nth-of-type()
:nth-of-type() zählt nur gleichgeordnete Elemente desselben Elementtyps und ignoriert andere. Das ist wichtig, wenn verschiedene Elementtypen gemischt werden.
<h2>Heading</h2><p>First paragraph</p><p>Second paragraph (blue)</p><p>Third paragraph</p>
:first-of-type und :last-of-type
Wählen Sie unter gleichgeordneten Elementen das erste oder letzte Element eines bestimmten Tagtyps aus:
<p>Lead paragraph (larger)</p><p>Regular paragraph</p>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%231e90ff'/></svg>" alt="one" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%23ff6347'/></svg>" alt="two" />
:nth-child vs :nth-of-type
Der entscheidende Unterschied:
p:nth-child(2)– wählt das zweite untergeordnete Element aus, WENN es ein<p>istp:nth-of-type(2)– wählt unabhängig von anderen Elementen das zweite<p>aus
:only-child und :only-of-type
:only-child wählt ein Element aus, das das einzige untergeordnete Element seines übergeordneten Elements ist. :only-of-type wählt ein Element aus, das innerhalb seines übergeordneten Elements das einzige Element dieses Typs ist.
<div><p>I'm the only child in this div.</p></div>
:nth-child mit of-S-Selektor (modern)
Modernes CSS ermöglicht es, mithilfe von :nth-child(An+B of selector) zu filtern, welche Elemente von der nth-Formel gezählt werden:
<ul><li class="featured">Featured 1</li><li>Regular</li><li class="featured">Featured 2 (gold)</li><li class="featured">Featured 3</li></ul>
Praxisbeispiel: Rasterabstand in der letzten Zeile
Entfernen Sie den unteren Außenabstand des letzten sichtbaren Elements:
<div class="grid"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
Kurzer Wissenstest
Welcher Selektor spricht jedes dritte Listenelement ab dem ersten Element an?
Zusammenfassung
:nth-child() zählt alle gleichgeordneten Elemente anhand ihrer Position; :nth-of-type() zählt nur gleichgeordnete Elemente desselben Tags. Verwenden Sie odd/even für gestreifte Tabellen. Mit der An+B-Formel lassen sich leistungsfähige Muster wie „jedes dritte“ oder „die ersten fünf“ umsetzen, ohne Klassen hinzuzufügen.
Häufig gestellte Fragen
Ist die Lektion „:nth-child und :nth-of-type“ kostenlos?
Ja — der vollständige Text von „:nth-child und :nth-of-type“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „:nth-child und :nth-of-type“?
Wählen Sie Elemente anhand ihrer Position in einem Elternelement mit nth-Formeln und Typselektoren aus. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „:nth-child und :nth-of-type“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- :hover, :focus, :active und :visited
- :nth-child und :nth-of-type
- :not(), :is() und :where()
- :checked, :disabled und Formularzustands-Pseudoklassen