CSS Selektoren

Elemente, Klassen, IDs, Kombinatoren, Attribute, Pseudoklassen und Spezifität. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• wichtige Selektortypen einsetzen
• Spezifität verständlich erklären
• zu starke Selektoren vermeiden

Erklärung

Selektoren bestimmen, welche Elemente eine Regel betrifft. Elementselektoren sind breit, Klassen sind flexibel, IDs sind sehr spezifisch. Kombinatoren wie Nachfahren- oder Kindselektoren beschreiben Beziehungen.

Spezifität entscheidet mit, welche Regel gewinnt. Inline-Styles sind stärker als IDs, IDs stärker als Klassen, Klassen stärker als Elemente. Trotzdem ist hohe Spezifität selten ein Qualitätsziel.

Beispiele

article p {
  line-height: 1.6;
}

.card > h2 {
  margin-top: 0;
}

input[required] {
  border-color: #2563eb;
}

a:hover {
  text-decoration: underline;
}

Diese Beispiele zeigen Nachfahren, direkte Kinder, Attributselektoren und Pseudoklassen.

.button::after {
  content: " →";
}

Pseudo-Elemente erzeugen gestaltbare Teile eines Elements.

Typische Fehler

• IDs für Styling in großen Projekten verwenden.
• Selektoren zu tief verschachteln, etwa .page .main .card ul li a.
• !important einsetzen, um Spezifitätsprobleme zu überdecken.

Best Practices

• Bevorzuge Klassen für Komponenten und Zustände.
• Halte Selektoren kurz und vorhersehbar.
• Nutze Pseudoklassen für Zustände wie :hover, :focus-visible oder :disabled.

Kleine Übung

Schreibe Selektoren für alle Pflichtfelder, jeden zweiten Listeneintrag, Links beim Hover und Überschriften direkt in Karten.

Zusammenfassung

CSS sollte Gestaltung systematisch lösen: klare Selektoren, wiederkehrende Werte, responsive Layouts und verständliche Zustände. Gute Stylesheets bleiben auch bei wachsenden Seiten wartbar.

Weiterführende Seiten

• Vorherige Seite: CSS Syntax
• Nächste Seite: CSS Farben und Einheiten
• Zur Übersicht
• CSS Syntax
• CSS Best Practices