CSS-Spezifitätsrechner
Berechnet Selektor-Spezifität.
Über dieses Tool
Der Rechner ermittelt die klassische Spezifität (a,b,c) eines Selektors, damit klar wird, warum eine Regel eine andere schlägt. Bewertet wird nur der Selektor selbst, nicht die Reihenfolge oder @layer.
So nutzen Sie es
Selektor eintippen oder einfügen, Berechnung starten und die Aufteilung in IDs, Klassen und Elemente ablesen. Niedrige Werte lassen sich später leichter überschreiben.
Beispiel
Der Beispielselektor mischt Elemente und Klassen, typisch für ältere Navigations-CSS.
Eingabe
nav.site-header .menu a.activeAusgabe
Selector: nav.site-header .menu a.active
Specificity: (0,3,2)
IDs: 0
Classes/attributes/pseudo-classes: 3
Elements/pseudo-elements: 2Tipp
Wer häufig !important braucht, kämpft in Wahrheit mit angesammelten Spezifitätsschulden.
Gut zu wissen
Wie wird die Spezifität berechnet?
Gezählt werden drei Gruppen: IDs, dann Klassen, Attribute und Pseudoklassen, dann Elemente und Pseudoelemente. Das Ergebnis erscheint als (a,b,c) und wird von links nach rechts verglichen.
Tauchen !important oder Inline-Styles hier auf?
Nein. Sie liegen außerhalb des Selektors und zählen nicht zum (a,b,c)-Wert. Ein Inline-Style oder !important schlägt jede Selektor-Spezifität.