01
Links beginnt der Vergleich
Zuerst IDs, dann Klassen und Attribute, zuletzt Elemente: Auch viele Klassen überholen eine ID nicht. Bei Gleichstand bleibt die Eingabereihenfolge erhalten.
CSS-Selektorwerkzeuge
CSS-Spezifitätsrechner
Ein Selektor pro Zeile. Kommaseparierte Listen werden einzeln bewertet; der HTML-Abgleich bleibt zunächst ausgeschaltet.
CSS-Spezifitätsrechner
Ein Selektor pro Zeile; äußere Kommas werden getrennt.
Gib einen Selektor ein.
Selektoren und optionales HTML bleiben im Browser; externe Ressourcen werden nicht geladen.
Optionen
Die Eingabe hat sich geändert; das Ergebnis ist veraltet.
Wenn eine Regel scheinbar nicht greift, zeigt der CSS-Spezifitätsrechner die getrennten Spalten für IDs, Klassen und Elemente. CSS Spezifität berechnen heißt nicht, eine Dezimalzahl zu addieren: Die Spalten werden von links nach rechts verglichen.
Mit der CSS Selektor Gewichtung lassen sich mehrere Kandidaten prüfen. Zum Selektoren vergleichen kann zusätzlich ein lokales HTML-Fragment dienen; ein Treffer ist aber noch keine Entscheidung über die endgültige Deklaration.
Darum hilft der CSS-Spezifitätsrechner
Funktionsargumente richtig einordnen
:is(#dialog, .panel) übernimmt den höchsten Wert seiner Argumente, während :where(#dialog, .panel) immer null beiträgt. Der CSS-Spezifitätsrechner zeigt die Einzelbeiträge und macht ein überraschendes ID sichtbar.
Treffer und Gewicht trennen
#missing kann ein hohes A haben und im eingefügten HTML dennoch nichts finden; .card kann mit kleinerem Wert treffen. Beide Aussagen werden getrennt angezeigt, statt einen Kaskadensieger zu behaupten.
So liest du den Vergleich
02
Pseudoklassen gezielt wechseln
Vergleiche :is() und :where() mit denselben Argumenten. :nth-child(... of S) zählt zusätzlich die Pseudoklasse selbst.
03
HTML nur bei Bedarf abgleichen
Aktiviere den Abgleich und füge ein Fragment ein. Die Zahl beschreibt statische Treffer, keine Hover-Zustände und keinen vollständigen CSS-Kaskadenentscheid.
Was die Auswertung enthält
A-B-C mit Einzelbeiträgen
IDs, Klassen/Attribute/Pseudoklassen und Typen/Pseudoelemente stehen in eigenen Spalten; die beitragenden Teile sind sichtbar.
Listen ohne Scheinwert
Eine oberste Kommaliste wird in Kandidaten getrennt. Absteigende Sortierung ist möglich, Gleichstände behalten ihre Reihenfolge.
Optionaler Fragmenttest
Ein inert geparstes HTML-Fragment liefert Trefferzahlen ohne Skriptausführung oder Abruf von Bildern und externen Stylesheets.
Grenzen der Selektorbewertung
- Kein endgültiger Kaskadensieger
- Herkunft, Wichtigkeit, Layer, Eigenschaft, Scope und Quellreihenfolge fehlen. Erst innerhalb des passenden Kaskadenschritts zählt Spezifität.
- Inline und !important nicht addieren
- style-Attribute und !important sind keine Bestandteile eines Selektors und gehören deshalb nicht in A, B oder C.
- Kommaselektoren einzeln bewerten
- Jeder Zweig besitzt ein eigenes Gewicht und kann andere Elemente treffen. Die Liste als Ganzes bekommt keinen gemeinsamen Wert.
- Null Treffer bedeutet nicht Null Gewicht
- Ein Selektor behält seinen A-B-C-Wert auch ohne Treffer im Fragment. Hover, Fokus und gerenderte Pseudoelemente werden nicht simuliert.
Fragen zum CSS-Spezifitätsrechner
Wie wird die Spezifität verglichen?
Von links nach rechts: erst IDs, dann Klassen/Attribute/Pseudoklassen, danach Elemente/Pseudoelemente. Der erste unterschiedliche Wert entscheidet den Gewichtsvergleich.
Zählt !important zur Spezifität?
Nein. !important beeinflusst die Kaskade außerhalb des Selektorwerts und wird nicht zu A-B-C addiert.
Wie vermeide ich Spezifitätskonflikte?
Flache Klassenselektoren und weniger Verschachtelung halten Werte überschaubar. Der Rechner zeigt, welches Teil eine unnötig hohe Spalte verursacht.
Werden meine Eingaben gespeichert?
Nein. Die Berechnung und der optionale HTML-Abgleich laufen im Browser; das Fragment wird als inerte Struktur verarbeitet.
Welcher Selektor gewinnt bei gleicher Spezifität?
Dann meldet der Rechner Gleichstand. Ob eine Deklaration gilt, hängt anschließend unter anderem von Scope und Quellreihenfolge ab.
Stimmt ein Selektorwert nicht?
CSS-Spezifitätsrechner jetzt nutzen
Vergleiche Selektoren und prüfe bei Bedarf Treffer im HTML-Fragment. Der CSS-Spezifitätsrechner hält Gewicht und Matching auseinander.