Selektor eingeben — Spezifitätswert (a,b,c) sofort berechnen. Mit Token-Aufschlüsselung und Vergleichsfunktion für mehrere Selektoren.
Komplexe Selektoren werden vollständig analysiert. !important wird erkannt aber nicht berechnet (überschreibt immer).
Bis zu 4 Selektoren gleichzeitig vergleichen — welcher gewinnt?
#id — ID-Selektor.class — Klassenselektor[attr] — Attributselektor:hover — Pseudo-Klassen:nth-child() — Strukturelldiv — Element-Tags::before — Pseudo-ElementeCSS-Konflikte durch falsch verstandene Spezifität führen zu visuellen Bugs, schlechter Nutzerführung und im schlimmsten Fall zu unlesbarem Content — alles negative Nutzersignale für Google. Ein Selektor wie #main p überschreibt immer .article p, egal in welcher Reihenfolge sie stehen.
Außerdem: Unvorhergesehene Stil-Konflikte durch Spezifitätsprobleme können Cumulative Layout Shift (CLS) verursachen — ein Core Web Vital, das direkt in Googles Ranking einfließt. Dieses Tool hilft, solche Konflikte präventiv zu erkennen.
CSS-Spezifität bestimmt, welche Regel bei Konflikten angewendet wird. Sie wird als dreistelliger Wert (a, b, c) ausgedrückt, wobei ein höherer Wert links immer gewinnt:
#id)Vergleich: 1,0,0 gewinnt immer gegen 0,99,99 — ID-Selektoren sind dominant. Der Universal-Selektor *, Kombinatoren (>, +, ~) und das :not()-Pseudoelement zählen selbst nicht, wohl aber ihr Inhalt.
!important überschreibt die gesamte Spezifität und sollte nur als letztes Mittel eingesetzt werden — es erschwert Wartung und Debugging erheblich.