Kaskade, Vererbung & Spezifität
Wenn mehrere Regeln dasselbe Element treffen und dieselbe Eigenschaft setzen — wer gewinnt? Das entscheidet die Kaskade. Ihr wichtigster Faktor ist die Spezifität: je „genauer" ein Selektor zielt, desto stärker ist er.
Spezifität zählt in vier Stufen — von links nach rechts wichtiger: Inline-Style → IDs → Klassen → Elemente. Verglichen wird wie bei einer Versionsnummer: die linke Stelle schlägt alles rechts davon.
Spielen: welche Farbe gewinnt?
Alle Regeln zielen auf dasselbe Element <p id="intro" class="lead text">. Schalte Regeln zu und beobachte, welche die Textfarbe bestimmt.
gerendertes Ergebnis
Ada Lovelace schrieb das erste Programm.
Gewinner: .lead.text → petrol
Spezifität gelesen als Inline · ID · Klasse · Element.
CSSaktive Regeln (Quellreihenfolge)
p { color: #6b7280; }
.lead { color: #2563eb; }
.lead.text { color: #0d9488; }Warum eigentlich? — Warum gibt es die Spezifität überhaupt?
Damit gezieltere Regeln allgemeinere überschreiben können, ohne dass die Reihenfolge im Stylesheet alles bestimmt. Du willst: a { color: blue } generell, aber .warnung a { color: red } in einem bestimmten Kontext. Ohne Spezifität müsstest du peinlich genau auf die Zeilen-Reihenfolge achten. Mit ihr darf die genauere Regel gewinnen, egal wo sie steht.
Häufiger Denkfehler — Mit !important gegen die Spezifität kämpfen
!important hebelt die ganze Spezifität aus — und ist fast immer ein Zeichen, dass etwas anderes schiefläuft. Es führt zu einem Wettrüsten (!important gegen !important) und macht CSS unwartbar. Besser: die zu schwache Regel spezifischer machen (eine Klasse mehr), statt mit der Brechstange. Inline-Styles und !important sind die zwei häufigsten Gründe, warum „mein CSS einfach nicht greift" — und beide tauchen oft in KI-Code auf.
Tiefer rein — Die volle Kaskaden-Reihenfolge
Bei einem Konflikt prüft der Browser in dieser Reihenfolge:
- Herkunft & Wichtigkeit — u.a. ob !important dranhängt.
- Spezifität — Inline > ID > Klasse/Attribut/Pseudo-Klasse > Element.
- Quellreihenfolge — bei Gleichstand gewinnt die zuletzt definierte Regel.