CSS-Spezifität

CSS-Spezifität bestimmt, welche Regel bei mehreren auf dasselbe Element angewendeten Regeln Vorrang hat. Sie wird als (a, b, c) ausgedrückt und von links nach rechts verglichen.

Spezifitätskomponenten

Komponente	Wert	Beispiele
a, ID	0-1-0-0	`#header`, `#nav`
b, Klasse/Attribut/Pseudo-Klasse	0-0-1-0	`.btn`, `[type="text"]`, `:hover`
c, Typ/Pseudo-Element	0-0-0-1	`div`, `p`, `::before`
Universal / Kombinatoren	0-0-0-0	`*`, `>`, `+`, `~`

Vergleichsregeln

Der Vergleich erfolgt von links nach rechts. Eine einzige ID (0,1,0,0) schlägt beliebig viele Klassen. Beispiel: #nav .link = (0,1,1,0) schlägt .menu .item a = (0,0,2,1).

Sonderfälle

!important überschreibt jede Spezifität (nur als letztes Mittel verwenden)
:is() und :has() erben die Spezifität ihres spezifischsten Arguments
:where() hat immer Spezifität null, nützlich für Resets
Inline-Styles haben die Spezifität (1,0,0,0)