Was ist CSS-Spezifität und warum zählt sie?
Wenn zwei CSS-Regeln dasselbe Element und dieselbe Property zielen (z. B. `color`), muss der Browser entscheiden, welche gilt. Das ist die Kaskade. Entscheidend: Origin (Author vs User), !important, Selektor-Spezifität und Source-Order.
Spezifität ist das numerische Gewicht eines Selektors. Wir scoren in vier Buckets (a, b, c, d): a = Inline-Style, b = ID-Count, c = Klassen / Attribute / Pseudo-Klassen, d = Elemente / Pseudo-Elemente. Der Selektor `#header .card a` scoret (0, 1, 1, 1). Der Selektor `.menu .item.active` scoret (0, 0, 3, 0). Der erste gewinnt wegen der ID.
Selektor pasten und die konkrete Zahl plus Breakdown sehen, was wie beigetragen hat. Compare-Modus zeigt, welcher Selektor gewinnt für dieselbe Property. CSS-Block-Modus parst eine ganze Regel und legt Konflikte offen.
So nutzt du das Tool
- Modus wählen: Single selector (einen debuggen), Compare (ein paar nebeneinander), CSS block (eine komplette Regel).
- Selektor oder CSS-Code in den Input pasten.
- Das Tool zeigt Spezifität als (a,b,c,d) plus Breakdown, was wie viel ergeben hat.
- Compare-Modus markiert den Gewinner, der Selektor mit höchster Spezifität gewinnt den Konflikt.
- "Copy" drücken, um das Ergebnis für Code-Review oder Doku zu kopieren.
Wann das hilft
Echte Situationen, in denen Spezifität zählt:
- "Warum greift mein Style nicht" debuggen. Deine Regel `.button { color: red }` bleibt nicht hängen, wahrscheinlich hat eine andere höhere Spezifität. Beide pasten, sehen welche gewinnt.
- CSS-Refactor. Von Legacy-CSS zu BEM / utility-first wandern, du musst die aktuellen Selektor-Gewichte verstehen.
- Zu Tailwind migrieren. Tailwind nutzt fast nur Klassen (Spezifität 0,0,1,0), wenn deine Legacy-Regel `#sidebar .menu a:hover` (0,1,2,1) ist, verliert Tailwind. Du brauchst `!important` oder hebst die Spezifität der Tailwind-Klasse an.
- Code-Review. Kommentar wie "dieser Selektor hat zu viel Spezifität, schwer zu überschreiben", das Tool gibt konkrete Zahlen für die Diskussion.
- Selectors L4 lernen - `:where()` ist immer Spezifität null, `:is()` nimmt die höchste seiner Argumente, `:has()` ebenso. Praxis hilft, das zu behalten.
- CSS-in-JS / Styled Components. Generierte Klassen sind low specificity (`.css-abc123`), leicht von `#id` oder `!important` überschrieben. Gut zu wissen.
- Print-Stylesheets. Regeln in `@media print` können dieselbe Spezifität wie normale haben, Source-Order entscheidet.
Um einen CSS-Gradient zu bauen, nimm den Gradient-Generator. Für box-shadow schau den Box-Shadow-Generator.