CSS-Spezifitäts-Rechner
Berechnet die Priorität (A-B-C) eines CSS-Selektors sofort
Geben Sie einen CSS-Selektor ein, und das Werkzeug zählt automatisch IDs (A), Klassen, Attribute und Pseudoklassen (B) sowie Tags und Pseudoelemente (C) und zeigt Ihnen den Spezifitätswert an. Das hilft Frontend-Entwicklern und Webdesignern immer dann, wenn unklar ist, warum ein Stil nicht greift oder welche Regel Vorrang hat. Der eingegebene Selektor wird ausschließlich im Browser verarbeitet und nicht an einen Server übertragen.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Geben Sie den zu analysierenden CSS-Selektor in das Eingabefeld ein (z. B. div.content > p::first-line).
- Prüfen Sie die automatisch ermittelten Werte für A (IDs), B (Klassen/Attribute/Pseudoklassen) und C (Tags/Pseudoelemente).
- Lesen Sie den finalen Spezifitätswert im Format A-B-C ab.
- Sehen Sie sich in der Liste darunter an, in welche Bestandteile der Selektor für die Berechnung zerlegt wurde.
FAQ
- Wie vergleicht man zwei Spezifitätswerte?
- Verglichen wird stellenweise in der Reihenfolge A, B, C. Der Selektor mit dem höheren A-Wert gewinnt immer; bei gleichem A entscheidet B, bei gleichem B entscheidet C.
- Werden auch Selektoren wie :not(), :is() und :has() berücksichtigt?
- Ja. Bei diesen funktionalen Pseudoklassen fließt der Selektor mit der höchsten Spezifität aus der Klammer in die Berechnung ein. Nur :where() bleibt ohne Einfluss auf die Spezifität.
- Wird mein Selektor an einen Server gesendet?
- Nein, die gesamte Berechnung erfolgt per JavaScript im Browser, es wird nichts übertragen.