CSS-Spezifität berechnen und Selektoren vergleichen

Wozu die CSS-Spezifitätsprüfung dient

Die CSS-Spezifität beschreibt, wie ein Selektor in seine bewerteten Bestandteile aufgeteilt wird. Das Werkzeug nimmt dafür optionalen Selektortext entgegen und zeigt vier Spezifitätskomponenten sowie einen daraus berechneten Zahlenwert an. Diese Darstellung eignet sich, wenn Sie einen einzelnen Selektor untersuchen oder die Werte mehrerer Eingaben nacheinander betrachten möchten.

Sie können einen einfachen Selektor wie #navigation oder .karte eingeben. Auch eine zusammengesetzte Eingabe wie article[data-status="neu"]:hover kann geprüft werden. Wenn zunächst kein Selektor vorliegt, müssen Sie das Feld nicht künstlich ausfüllen: Eine leere oder nur aus Leerzeichen bestehende Eingabe wird verarbeitet und führt zu einer neutralen Ausgabe. So lässt sich zuerst die Form des Ergebnisses ansehen, bevor Sie einen konkreten Selektor untersuchen.

Eine Eingabe auswerten

1. Öffnen Sie das Werkzeug und suchen Sie das Feld für den CSS-Selektor.
2. Tragen Sie den gewünschten Selektor als Text ein, etwa #navigation, .karte oder article[data-status="neu"]:hover.
3. Führen Sie die vorgesehene Berechnung aus und warten Sie auf die angezeigte Auswertung.
4. Lesen Sie die vier Komponenten getrennt voneinander ab und beachten Sie anschließend den numerischen Score.
5. Ersetzen Sie die Eingabe bei Bedarf durch einen weiteren Selektor, wenn Sie dessen Darstellung und Zahlenwert ebenfalls prüfen möchten.

Bei einer nicht leeren Eingabe bleibt der übermittelte Selektortext in der Ergebnisdarstellung erhalten. Dadurch können Sie die angezeigten Komponenten der Eingabe zuordnen, ohne den geprüften Text aus dem Gedächtnis rekonstruieren zu müssen. Ein leerer Inhalt oder eine Eingabe, die nur aus Leerzeichen besteht, nimmt dagegen einen besonderen Ausgang ein: Die vier Komponenten stehen auf null, der Score beträgt null und die Selektordarstellung bleibt leer.

Die geprüften Eingaben liefern eine erfolgreiche Auswertung für die vorgesehenen Berechnungspfade. Dazu gehören unter anderem ein ID-Selektor, ein Klassen-Selektor und ein zusammengesetzter Selektor. Für Ihre Arbeit genügt es, den zu untersuchenden Text einzusetzen und die zurückgegebenen Werte abzulesen.

Komponenten und Score lesen

Die erste Komponente berücksichtigt ID-ähnliche Bestandteile. Beim reinen Selektor #navigation ergibt sich dafür die Form [1, 0, 0, 0]. Klassenähnliche Bestandteile fließen in die zweite Komponente ein; dort können außerdem erkannte Attributselektoren und Pseudoklassen beitragen. Pseudoelemente sowie erkannte Element- oder Typselektoren werden der dritten Komponente zugeordnet.

Der Universalselektor * erhöht den Wert in dieser Auswertung nicht. Für den Zahlenwert werden die vier Positionen mit 1000, 100, 10 und 1 gewichtet. Ein vorhandener Beitrag an einer höher gewichteten Position wirkt sich deshalb stärker auf den Score aus als ein Beitrag an einer späteren Position. Der Zahlenwert ist zusammen mit der Komponentenform zu lesen, weil beide Ansichten unterschiedliche Details derselben Eingabe sichtbar machen.

Die Zuordnung richtet sich nach den erkannten Mustern der Berechnung. Ungewöhnliche oder besonders komplexe Schreibweisen sollten Sie daher vorsichtig interpretieren, wenn die sichtbare Aufteilung nicht Ihren Erwartungen entspricht. Die Ausgabe beschreibt dann die erkannten Bestandteile und sollte nicht als Zusicherung verstanden werden, dass jede mögliche CSS-Syntaxvariante vollständig abgedeckt ist.

Praktisches Beispiel

Sie möchten vor einer Änderung an einer Kartenregel feststellen, welche Spezifitätsausgabe der Selektor .karte erzeugt.

Geben Sie im Fall einer zu prüfenden Kartenregel .karte ein und führen Sie die Berechnung aus. Kontrollieren Sie danach die zweite Komponente, den Score und die angezeigte Selektordarstellung.

Für .karte erscheint eine nicht leere Selektordarstellung, die zweite Komponente enthält mindestens einen Beitrag, und der numerische Score ist größer als null.

Einschränkungen

• Die Aufteilung folgt erkannten Selektormustern, weshalb ungewöhnliche oder komplexe CSS-Schreibweisen eine unerwartete Darstellung ergeben können.

Häufige Fehler

• Leeres Feld als fehlende Auswertung behandeln: Eine leere oder nur aus Leerzeichen bestehende Eingabe ist zulässig, erzeugt aber vier Nullkomponenten, einen Score von null und keine Selektordarstellung. Setzen Sie den vorgesehenen Selektortext ein, wenn Sie eine konkrete Aufteilung prüfen möchten.

Häufige Fragen

Kann ich das Eingabefeld leer lassen?

Ja, das Feld kann leer bleiben, weil der Selektortext optional ist. Bei leerem oder nur aus Leerzeichen bestehendem Inhalt sehen Sie vier Nullwerte, einen Score von null und keine Selektordarstellung.

Wie wird ein ID-Selektor bewertet?

Ein ID-ähnlicher Bestandteil trägt zur ersten Komponente bei. Für den reinen Selektor #navigation zeigt die Ausgabe die Komponentenform [1, 0, 0, 0].

Wird jeder Teil eines CSS-Selektors gezählt?

Nein, der Universalselektor * wird nicht gezählt. Klassen, Attribute, Pseudoklassen, Pseudoelemente sowie erkannte Element- oder Typselektoren werden abhängig vom erkannten Muster unterschiedlichen Komponenten zugeordnet.