Overview
In dieser Vorlesung geht es um die theoretischen Grundlagen von CSS-Kombinatoren, ihre Typen und Anwendungsmöglichkeiten, um gezielt HTML-Elemente zu selektieren.
Überblick CSS-Selektoren
- Selektoren sind notwendig, um HTML-Elemente mit CSS anzusprechen.
- Es gibt vier Haupttypen: Typselektoren, Klassenselektoren, ID-Selektoren und Pseudo-Selektoren.
Klassische Selektoren
- Typselektor: Spricht direkt HTML-Tags wie
div oder p an.
- Klassenselektor: Beginnt mit einem Punkt, z. B.
.klasse, für mehrere Elemente geeignet.
- ID-Selektor: Beginnt mit einer Raute, z. B.
#id, nur einmal pro HTML-Dokument nutzen.
- Pseudo-Selektoren: Mit Doppelpunkt (Klasse) oder Doppeldoppelpunkt (Element), z. B.
:hover oder ::first-letter.
Kombinatoren in CSS
- Kombinatoren verbinden zwei Selektoren, um gezielt Elemente nach ihrer Beziehung im DOM auszuwählen.
- Vor der Anwendung sollte die Struktur der HTML-Elemente (Verschachtelungen) verstanden werden.
Typen von Kombinatoren
- Nachfahrenselektor (Leerzeichen):
article p – Wählt alle p, die Nachfahren von article sind.
- Kindselektor (
>): article > div – Wählt alle div, die direkte Kinder von article sind.
- Nachbarselektor (
+): div + div – Wählt ein div, das direkt nach einem anderen div folgt.
- Geschwisterselektor (
~): div ~ div – Wählt alle div, die Geschwister nach einem anderen div auf gleicher Ebene sind.
Beziehungen und Struktur
- Eltern-Kind-Beziehung: Von links nach rechts im DOM-Baum.
- Nachbar- bzw. Geschwisterbeziehung: Von oben nach unten auf gleicher Hierarchieebene.
- Einrückungen im Quellcode helfen, diese Beziehungen zu erkennen.
Key Terms & Definitions
- Selektor — CSS-Anweisung zur Auswahl von HTML-Elementen.
- Kombinator — Verbindung zwischen zwei Selektoren zur Definition von DOM-Beziehungen.
- Nachfahrenselektor — Wählt alle Elemente, die Nachkommen eines bestimmten Elements sind.
- Kindselektor — Wählt direkte Kinder eines Elements.
- Nachbarselektor — Wählt das unmittelbar folgende Geschwisterelement.
- Geschwisterselektor — Wählt alle nachfolgenden Geschwisterelemente auf gleicher Ebene.
Action Items / Next Steps
- Sieh dir das Praxisvideo zum Thema Kombinatoren an.
- Übe das Erkennen von Elementbeziehungen im HTML-Quellcode.
- Experimentiere mit den verschiedenen Kombinatoren in einer eigenen CSS-Datei.