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.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
