Spezifitätsrechner: Welche CSS-Regel gewinnt und warum

So verwenden Sie es

Tippen Sie einen Selektor in Selektor ein, so wie er in Ihrem Stylesheet steht.
Tippen Sie einen zweiten Selektor in Zweiter Selektor (optional) ein, um beide zu vergleichen, oder lassen Sie das Feld leer.
Lesen Sie Spezifität (a, b, c) für den ersten Selektor ab und Welche Regel gewinnt, wenn Sie zwei angegeben haben.
Nutzen Sie die Tabelle Gezählte Teile, um zu sehen, welcher Teil jedes Selektors welche Zahl ergibt.

Wie die drei Zahlen gezählt werden

Die Selectors Level 3 Recommendation zählt einen Selektor in drei Spalten. Das Werkzeug vergleicht die Zahlen von links nach rechts: zuerst a, dann b, dann c. Der Universalselektor * und die Kombinatoren wie > und + zählen nicht.

a ist die Anzahl der ID-Selektoren, etwa #nav.
b ist die Anzahl der Klassenselektoren wie .active, der Attributselektoren wie [href] und der Pseudoklassen wie :hover.
c ist die Anzahl der Typselektoren wie li oder a und der Pseudoelemente wie ::before.

Pseudoklassen mit Argumenten

:is(), :not() und :has() zählen mit ihrem spezifischsten Argument, deshalb ergibt :is(#a, .b) den Wert (1, 0, 0). :where() zählt gar nicht. :nth-child() zählt als eine Pseudoklasse plus den spezifischsten Selektor in seiner Liste „of S“, deshalb ergibt :nth-child(even of li, .item) den Wert (0, 2, 0). Diese Regeln stammen aus dem Selectors Level 4 Entwurf, einem Editor's Draft, der sich noch ändern kann.

Was das Werkzeug nicht tut

Es zählt ein Pseudoelement mit Argumenten, etwa ::part(x), als ein Pseudoelement und liest das Argument nicht.
Es liest keine Verschachtelung mit & und nimmt pro Feld einen Selektor, keine Liste mit Kommas.
Es kann Ihr Stylesheet nicht sehen. Bei einem Gleichstand sagt es, dass die später stehende Regel gewinnt, und überlässt Ihnen die Reihenfolge.

Beispiel: ein Link in einer Navigationsleiste

Der erste Selektor, #nav li.active > a:hover, hat eine ID, #nav. Er hat zwei Klassen- und Pseudoklassenselektoren, .active und :hover, und zwei Typen, li und a. Seine Spezifität ist (1, 2, 2). Der zweite Selektor, #nav a, hat eine ID und einen Typ, seine Spezifität ist daher (1, 0, 1). Der erste Selektor gewinnt, weil a gleich ist und b und c höher sind.

Selektor	a	b	c
#nav li.active > a:hover	1	2	2
#nav a	1	0	1

Häufig gestellte Fragen

Warum zählt eine ID in der ersten Spalte?

Das Werkzeug vergleicht die Spalten von links nach rechts, deshalb wird zuerst die ID-Spalte a entschieden. Ein Selektor mit einer ID mehr hat ein höheres a, und die Klassen und Typen in b und c werden in diesem Fall nicht mehr angesehen.

Spielt die Reihenfolge der Regeln eine Rolle?

Nur wenn zwei Selektoren dieselbe Spezifität haben. Die CSS Cascade Level 4 Spezifikation legt fest, dass dann die letzte Deklaration in der Dokumentreihenfolge gewinnt, also die später stehende Regel.

Warum erhöht :not(#a) die Spezifität?

Die Pseudoklasse :not() selbst wird nicht gezählt, ihr Argument aber schon. Das Beispiel #s12:not(FOO) im Level-3-Kapitel hat die Spezifität (1, 0, 1): eine ID aus #s12 und ein Typ aus dem Argument FOO.

Zählen der Universalselektor und die Kombinatoren mit?

Nein. Der Universalselektor wird ignoriert, ebenso die Kombinatoren wie >, + und ~. Das Beispiel * im Level-3-Kapitel hat die Spezifität (0, 0, 0).

Berücksichtigt dieses Werkzeug Inline-Styles und !important?

Nein. Es zählt einen Selektor. Die Kaskade vergleicht zuerst Herkunft und Wichtigkeit, bevor sie die Spezifität heranzieht, deshalb kann eine Regel mit !important oder ein Inline-Style gewinnen, egal welche Werte die Selektoren haben. Vergleichen Sie nur zwei Selektoren, die dieselbe Eigenschaft mit derselben Wichtigkeit setzen.

Wird der Selektor, den ich eintippe, irgendwohin gesendet?

Nein. Die Auswertung läuft in Ihrem Browser, und nichts, was Sie eintippen, wird gespeichert oder an unseren Server gesendet. Prüfen Sie das Ergebnis, bevor Sie ein Stylesheet ändern.

Quellen

Zahlen und Text zuletzt geprüft: Donnerstag, 12. November 2026.

Ergebnis