CSS-Spezifitäts-Rechner
Vergleiche die CSS-Spezifität einzelner Selektoren oder zweier Regeln. Werte IDs, Klassen, Attribute, Pseudo-Klassen und Elemente nach der Kaskadenlogik aus.
Beispiele für CSS-Spezifität
Die Beispiele zeigen, wie IDs, Klassen und Elementselektoren in den drei Spalten des Tupels erscheinen.
| Selektor | Spezifität | Begründung |
|---|---|---|
| p | 0,0,0,1 | Ein Elementselektor |
| * | 0,0,0,0 | Universeller Selektor ohne Gewicht |
| .card | 0,0,1,0 | Ein Klassenselektor |
| button.primary | 0,0,1,1 | Eine Klasse und ein Element |
| #menu .item a | 0,1,1,1 | Eine ID, eine Klasse und ein Element |
Häufige Fragen
Was bedeutet CSS-Spezifität?
Die CSS-Spezifität beschreibt, welche Regel gewinnt, wenn mehrere Selektoren dasselbe Element treffen. Das Tupel (a, b, c) wird von links nach rechts verglichen.
Wie wird das Spezifitäts-Tupel berechnet?
IDs erhöhen die erste Spalte, Klassen, Attribute und Pseudo-Klassen die zweite. Elementselektoren und Pseudo-Elemente erhöhen die dritte Spalte. Universelle Selektoren zählen nicht.
Wie vergleiche ich zwei Selektoren?
Vergleiche zuerst die ID-Spalte, danach Klassen und Pseudo-Klassen und zuletzt Elemente. Der erste höhere Wert entscheidet. Bei einem Gleichstand gewinnt die später deklarierte Regel.
Wie wirken sich :is(), :not(), :has() und :where() aus?
:is(), :not() und :has() übernehmen die höchste Spezifität ihrer Argumente. :where() bleibt immer bei null, auch wenn darin ein ID-Selektor steht.
Warum zählen Pseudo-Elemente anders als Pseudo-Klassen?
Pseudo-Klassen beschreiben Zustände und zählen in Spalte b. Pseudo-Elemente zielen auf einen Teil eines Elements und zählen wie Elementselektoren in Spalte c.
Verändert !important die Spezifität?
Nein. !important und Inline-Stile liegen außerhalb des Spezifitäts-Tupels. Sie können die normale Kaskade überstimmen, während dieser Rechner nur Selektoren bewertet.
Änderungsverlauf
Aktualisierungen von CSS-Spezifitäts-Rechner, nach Datum gruppiert.
1 Aktualisierung
CSS-Spezifitäts-Rechner hinzugefügt
- Vergleiche die CSS-Spezifität einzelner Selektoren oder zweier Regeln. Werte IDs, Klassen, Attribute, Pseudo-Klassen und Elemente nach der Kaskadenlogik aus.
Ähnliche Rechner
Weitere geprüfte Rechner im Themenbereich „Technik“.