CSS-Spezifitäts-Rechner

CSS-Spezifität von Selektoren berechnen, verständlich aufschlüsseln und mehrere Selektoren miteinander vergleichen.

Der CSS-Spezifitäts-Rechner berechnet, wie stark ein Selektor ist. Du fügst einen oder mehrere Selektoren ein, erhältst die Spezifität als Dreierwert aus ID, Klasse und Element und siehst jeden Bestandteil einzeln erklärt. Eine Rangliste zeigt, welcher Selektor sich bei Konflikten durchsetzt. Moderne Funktionen wie :is(), :not(), :where() und :has() werden berücksichtigt.

Selektoren

#nav .item:hover (1, 2, 0) = 1-2-0

#navID.itemKlasse:hoverPseudoklasse
.card > .title (0, 2, 0) = 0-2-0

.cardKlasse.titleKlasse
ul li a (0, 0, 3) = 0-0-3

ulElementliElementaElement
:is(#header, .top) a (1, 0, 1) = 1-0-1

:is(#header, .top)PseudoklasseaElement
:where(.reset) a (0, 0, 1) = 0-0-1

:where(.reset):where()aElement
a:not(.button) (0, 1, 1) = 0-1-1

aElement:not(.button)Pseudoklasse

Rangliste: wer sich durchsetzt

1.#nav .item:hover (1, 2, 0)
2.:is(#header, .top) a (1, 0, 1)
3..card > .title (0, 2, 0)
4.a:not(.button) (0, 1, 1)
5.ul li a (0, 0, 3)
6.:where(.reset) a (0, 0, 1)

Bei gleicher Spezifität steht der Selektor weiter oben, der im Stylesheet später kommt.

Was ist CSS-Spezifität?

Wenn mehrere CSS-Regeln auf dasselbe Element zielen, entscheidet die Spezifität, welche gilt. Sie wird aus dem Selektor berechnet und als Dreierwert geschrieben: Anzahl der IDs, Anzahl der Klassen, Attribute und Pseudoklassen, Anzahl der Elemente und Pseudoelemente.

Wie die Bestandteile zählen

Bestandteil	Beispiel	Beitrag
ID	`#nav`	(1, 0, 0)
Klasse, Attribut, Pseudoklasse	`.card`, `[type]`, `:hover`	(0, 1, 0)
Element, Pseudoelement	`a`, `::before`	(0, 0, 1)
Universal, Kombinator, :where()	`*`, `>`	(0, 0, 0)

So gehst du vor

Selektoren einfügen und die Werte vergleichen.
Den Selektor vereinfachen, der zu stark ist, statt !important zu setzen.
Für Layout-Regeln probierst du den Flexbox-Playground und den CSS-Grid-Generator aus.

Beispiel

#nav .item:hover hat die Spezifität (1, 2, 0), ul li a nur (0, 0, 3). Auch zehn Elemente schlagen keine einzige Klasse. :where(.reset) a ergibt (0, 0, 1), damit lässt sich der Stil leicht überschreiben.

Häufige Fragen

Wie wird die Spezifität berechnet?

Es werden drei Zahlen gezählt: IDs (a), Klassen, Attribute und Pseudoklassen (b) sowie Elemente und Pseudoelemente (c). Verglichen wird von links: ein einzelner ID-Selektor schlägt beliebig viele Klassen, eine Klasse schlägt beliebig viele Elemente.

Was passiert bei gleicher Spezifität?

Dann gewinnt die Regel, die im Stylesheet später steht. Deshalb ist die Reihenfolge der Regeln wichtig. Die Rangliste zeigt bei Gleichstand den späteren Selektor zuerst.

Wie zählen :is(), :not(), :has() und :where()?

:is(), :not() und :has() übernehmen die Spezifität ihres stärksten Arguments. :where() zählt immer null, was es ideal für überschreibbare Basisstile macht. :nth-child() zählt als Pseudoklasse plus der Spezifität eines optionalen „of“-Selektors.

Wo stehen Inline-Styles und !important?

Inline-Styles schlagen jede Spezifität aus Selektoren. !important überstimmt beides, unter mehreren !important-Regeln entscheidet wieder die Spezifität. Beides ist nicht Teil des Selektor-Werts und wird deshalb hier nicht berechnet.

Wie halte ich die Spezifität niedrig?

Nutze Klassen statt IDs, vermeide lange Selektor-Ketten und setze :where() für Basisstile ein. Mit CSS Cascade Layers (@layer) legst du außerdem die Reihenfolge unabhängig von der Spezifität fest.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.