CSS-Selektoren

CSS-Selektoren bestimmen, auf welche HTML-Elemente die Stile angewendet werden. Damit können wir gezielt ein einzelnes Element, mehrere Elemente oder komplexe Strukturen auswählen.

Grundlegende Selektoren

Grundlegende Selektoren beziehen sich direkt auf ein HTML-Element, z. B. <p>, <div>, <h1>. Damit können wir gezielt bestimmte Elemente im Dokument ansprechen.

Im folgenden Beispiel wird der Text aller <p>-Elemente blau:

Häufige Selektortypen

In CSS können verschiedene Selektortypen verwendet werden. Die folgende Tabelle zeigt die gängigsten:

Selektor	Beschreibung
p	Wählt alle <p>-Elemente aus.
.class	Wählt alle Elemente mit der angegebenen Klasse aus.
#id	Wählt das Element mit der angegebenen ID aus.
*	Wählt alle HTML-Elemente aus.

Komplexe Selektoren

Komplexe Selektoren ermöglichen es, genauere Regeln zu erstellen, indem z. B. Eltern-Kind-Beziehungen oder Zustände kombiniert werden.

Pseudoklassen

Pseudoklassen zielen auf spezielle Zustände oder Positionen ab, z. B. wenn sich der Mauszeiger über einem Element befindet oder das erste Element in einer Liste ausgewählt wird.

Attributselektoren

Mit Attributselektoren können wir Elemente ansprechen, die bestimmte Attribute besitzen oder deren Wert einem Muster entspricht.

Kombinatoren

Mit Kombinatoren können wir die Beziehung zwischen Elementen definieren, z. B. Eltern-Kind, Geschwister oder allgemeine Hierarchien.

Tipps zur Verwendung von Selektoren

Die effektive Nutzung von Selektoren trägt dazu bei, CSS übersichtlich zu halten und unnötigen Code zu vermeiden. Hier einige Tipps:

Vermeide zu allgemeine Selektoren (*), da sie zu Performanceproblemen führen können.
Verwende ID-Selektoren sparsam, setze stattdessen lieber Klassen für mehr Flexibilität ein.
Achte auf Spezifität: Genauere Selektoren überschreiben allgemeinere Regeln.