Du hast eine CSS-Regel geschrieben, sie sieht korrekt aus, aber im Browser passiert nichts – die Farbe bleibt unverändert, der Abstand ignoriert. In den allermeisten Fällen liegt das nicht an einem Tippfehler, sondern an der Spezifität. Sie entscheidet, welche von mehreren konkurrierenden Regeln am Ende gewinnt. Wer das Prinzip einmal verstanden hat, debuggt CSS deutlich schneller.
Was Spezifität überhaupt bedeutet
Wenn mehrere CSS-Regeln dasselbe Element ansprechen und sich widersprechen, muss der Browser entscheiden, welche er anwendet. Dafür berechnet er für jeden Selektor ein Gewicht – die Spezifität. Die Regel mit dem höheren Gewicht setzt sich durch, unabhängig von ihrer Reihenfolge im Stylesheet. Nur bei gleicher Spezifität entscheidet die Position: die später notierte Regel gewinnt.
Die Spezifität wird als Tripel (a, b, c) dargestellt, manchmal auch als vierstellig mit Inline-Styles vorne. Du kannst dir das wie eine Zahl mit drei Stellen vorstellen, die getrennt verglichen werden.
Die drei Kategorien
Jeder Teil eines Selektors fällt in eine von drei Gruppen, die das Tripel aufbauen:
- a – IDs: Jeder
#id-Selektor zählt für die erste Stelle. IDs haben das höchste Gewicht der normalen Selektoren. - b – Klassen, Attribute, Pseudoklassen:
.klasse,[type="text"]und:hoverzählen für die mittlere Stelle. - c – Elemente und Pseudoelemente:
div,p,::beforezählen für die letzte Stelle.
Der Universalselektor * und Kombinatoren wie > oder + tragen nichts zur Spezifität bei. Ein Beispiel: nav#main ul li.active a ergibt eine ID (a=1), eine Klasse (b=1) und drei Elemente (c=3), also (1, 1, 3). Wenn du solche Selektoren zerlegen und gegeneinander vergleichen willst, nimmt dir der CSS Spezifitaet Rechner das Zählen ab und zeigt das Gewicht direkt an.
Warum (0,1,0) jedes (0,0,99) schlägt
Ein häufiges Missverständnis: Viele meinen, viele Element-Selektoren würden sich irgendwann zu einer Klasse "aufsummieren". Das stimmt nicht. Die Stellen werden von links nach rechts verglichen, ohne Übertrag. Eine einzige Klasse (0,1,0) schlägt selbst hundert verschachtelte Element-Selektoren (0,0,100), weil die mittlere Stelle zuerst entscheidet. Genauso schlägt eine einzige ID jede beliebige Menge an Klassen.
Mit dem CSS Spezifitaet Rechner kannst du genau das prüfen: zwei Selektoren eingeben und sehen, welcher gewinnt – ohne im Kopf rechnen zu müssen.
Inline-Styles und !important
Über den drei Kategorien stehen zwei Sonderfälle. Inline-Styles direkt am Element (style="color:red") haben eine noch höhere Priorität als jeder Selektor im Stylesheet. Sie bilden die vierte, oberste Stelle des Tripels.
Noch darüber thront !important. Eine Deklaration mit !important überschreibt alles Normale, unabhängig von der Spezifität. Das klingt praktisch, ist aber ein häufiger Grund für unwartbares CSS: Sobald eine wichtige Regel existiert, kannst du sie nur noch mit einer weiteren !important-Regel überstimmen – ein Wettrüsten, das schnell eskaliert. Nutze !important nur als letzte Wahl, etwa um Stile von Drittanbieter-Widgets zu überschreiben.
Praktische Strategien für sauberes CSS
Wer Spezifitätskonflikte von vornherein vermeiden will, hält das Gewicht möglichst flach und gleichmäßig:
- Auf Klassen setzen: Vergib Stile über Klassen statt über IDs oder tiefe Element-Ketten. So bleibt die Spezifität niedrig und vorhersehbar.
- Verschachtelung kurz halten: Selektoren wie
.card .header .title spansind schwer zu überschreiben. Eine einzige aussagekräftige Klasse ist meist besser. - Namenskonventionen wie BEM: Methoden wie BEM erzeugen flache, ein-Klassen-Selektoren und halten die Spezifität bewusst konstant.
- Cascade Layers nutzen: Moderne Browser unterstützen
@layer, womit du die Reihenfolge ganzer Regelgruppen explizit steuerst – oft die elegantere Alternative zu!important.
Spezifität debuggen
Wenn eine Regel nicht greift, öffne die Entwicklertools des Browsers und schau dir das betroffene Element an. Durchgestrichene Eigenschaften zeigen dir, dass eine andere Regel mit höherer Spezifität gewonnen hat. Die Tools listen die konkurrierenden Selektoren in absteigender Priorität auf. Reicht das nicht, hilft es, die beteiligten Selektoren einzeln durch den CSS Spezifitaet Rechner zu schicken und die Gewichte direkt zu vergleichen.
Für weitere CSS-Werkzeuge rund um Einheiten, Abstände und Layout lohnt sich ein Blick in die Webtools-Sammlung, etwa den CSS Einheiten Umrechner für die Umrechnung zwischen px, em und rem.
Fazit
Spezifität ist kein Hexenwerk, sondern ein klares Punktesystem: IDs vor Klassen, Klassen vor Elementen, Inline und !important darüber. Wer Selektoren bewusst flach hält und das Gewicht im Blick behält, vermeidet die meisten "Warum greift das nicht?"-Momente. Im Zweifel zählt der CSS Spezifitaet Rechner für dich nach.