CSS-Selektor-Spezifität berechnen

Dieser Rechner nimmt einen Selektor entgegen, prüft seine Struktur und liefert die vertraute vierteilige Wertung: Inline-Stile, IDs, Klassen beziehungsweise Attribute oder Pseudoklassen sowie Elementtypen oder Pseudoelemente. Auch die Sonderregeln moderner Selektoren wie :is(), :not(), :has(), :where() und :nth-child() werden angewendet. Nutzen Sie das Werkzeug, um unerwartetes Überschreiben zu erklären, Selektoren bei einer Überarbeitung zu vergleichen oder Entwicklungswerkzeuge um eine zuverlässige Spezifitätsprüfung zu ergänzen.

Das vierteilige Spezifitätsergebnis lesen

Das Ergebnis wird als (Inline, ID, Klasse, Typ) ausgegeben. Die erste Position steht für Inline-Stildeklarationen. Da dieses Werkzeug einen Selektor und kein HTML-style-Attribut erhält, ist dieser Wert stets null. Die zweite Position zählt ID-Selektoren wie <code>#checkout</code>. Die dritte fasst Klassen- und Attributselektoren sowie Pseudoklassen zusammen; <code>.button</code>, <code>[disabled]</code> und <code>:hover</code> erhöhen sie jeweils um eins. Die vierte zählt Elementtypselektoren und Pseudoelemente, sodass <code>button</code> und <code>::before</code> ebenfalls je einen Punkt beitragen. Universalselektoren und Kombinatoren zählen nicht. Vergleichen Sie das Tupel von links nach rechts, statt seine Werte zu einer Dezimalzahl zu addieren: Eine ID übertrifft beliebig viele Klassen, eine Klasse beliebig viele Typen. Benannte Felder erleichtern die Verarbeitung im Code, während das Spezifitätsarray die übliche Darstellung bewahrt. Beachten Sie, dass Spezifität nur ein Teil der Kaskade ist. Ursprung, Wichtigkeit, Kaskadenebenen, Gültigkeitsnähe und Quellreihenfolge können auf einer echten Seite weiterhin bestimmen, welche Deklaration gewinnt.

Regeln funktionaler Pseudoklassen verstehen

Moderne funktionale Pseudoklassen lassen sich nicht durch bloßes Zählen aller Tokens bewerten. <code>:is()</code>, <code>:not()</code> und <code>:has()</code> übernehmen die Spezifität des stärksten Selektors ihrer Argumentliste; die umschließende Pseudoklasse fügt keinen Klassenwert hinzu. <code>:where()</code> liefert dagegen immer null, selbst wenn das Argument eine ID enthält. Dadurch eignet sich <code>:where()</code> für Bibliotheksvorgaben, die leicht überschreibbar bleiben sollen. Die strukturellen Pseudoklassen <code>:nth-child()</code> und <code>:nth-last-child()</code> zählen einmal auf Klassenebene. Eine optionale Selektorliste nach <code>of</code> steuert zusätzlich ihr stärkstes Mitglied bei. Andere funktionale Pseudoklassen zählen auf Klassenebene, Pseudoelemente auf Typebene. Der Parser erkennt außerdem relative Selektoren in <code>:has()</code>, maskierte Zeichen in Bezeichnern, Attributwerte mit Satzzeichen, Namensräume und die historischen Schreibweisen mit einem Doppelpunkt: <code>:before</code>, <code>:after</code>, <code>:first-line</code> und <code>:first-letter</code>. Diese Unterschiede entsprechen dem Umgang mit aktuellem CSS und behandeln Klammerinhalte nicht einfach als undurchsichtigen Text.

Selektorfehler durch Validierung erkennen

Ein Spezifitätswert ist nur sinnvoll, wenn die Eingabe ein plausibler Selektor ist. Der Rechner weist deshalb fehlende Felder, leeren Text, nicht abgeschlossene Zeichenketten, offene eckige oder runde Klammern, fehlerhafte Kombinatoren, fehlende Bezeichner nach Punkt oder Raute und weitere Strukturfehler zurück. Pro Aufruf wird ein Selektor akzeptiert. Ein Komma auf oberster Ebene erzeugt eine Selektorliste, deren Mitglieder unterschiedliche Spezifitäten besitzen können. Eine solche Eingabe wird mit dem Hinweis abgelehnt, jeweils einen Selektor zu übermitteln; berechnen Sie beim Vergleich einer Regelliste jedes Mitglied einzeln. Die Eingabelänge ist begrenzt, damit die Ausführung vorhersehbar bleibt. Der Algorithmus verwendet weder Browsersitzung noch Netzwerk, Zufallswert oder Uhrzeit. Identische Eingaben erzeugen daher im lokalen Widget, bei einem API-Aufruf, in Tests oder bei einer Build-Prüfung dasselbe JSON. Verwenden Sie das Ergebnis als gezielte Diagnose. Prüfen Sie anschließend Kaskadenebenen, <code>!important</code>, Vererbung und Quellreihenfolge, falls die Spezifität allein den dargestellten Stil nicht erklärt.