Rechner für die CSS-Spezifität
1
ID
2
Classes/Attr
1
Elements
121
Total
0
ID
2
Classes/Attr
1
Elements
21
Total
Gewinnender Selektor
A
Specificità 1,2,1 vs 0,2,1
Häufige Fragen
Was man über die CSS-Spezifität wissen sollte
Wie wird die CSS-Spezifität berechnet?
Die Spezifität ist ein Tripel (a,b,c): «a» zählt IDs (#id), «b» zählt Klassen (.klasse), Attribute ([attr]) und Pseudoklassen (:hover), «c» zählt Elemente (div, p) und Pseudoelemente (::before). Verglichen wird von links: 1,0,0 schlägt immer 0,10,0.
Was schlägt was bei der CSS-Spezifität?
Stile direkt im Attribut (style="") haben die Spezifität 1,0,0,0 und schlagen alles. Dann kommen IDs (0,1,0,0), dann Klassen, Attribute und Pseudoklassen (0,0,1,0), dann Elemente und Pseudoelemente (0,0,0,1). Der Universalselektor (*) hat die Spezifität 0. !important setzt sich über alles hinweg.
Warum ist die Spezifität wichtig?
Wenn mehrere CSS-Regeln auf dasselbe Element zutreffen, gewinnt die mit der höchsten Spezifität. Wer sie versteht, erlebt weniger Überraschungen beim Gestalten und braucht seltener !important. Guter CSS-Aufbau hält die Spezifität niedrig und vorhersagbar.
Wie berechnet man die Spezifität eines CSS-Selektors?
Die Spezifität liest sich als Tripel: Die erste Zahl zählt IDs, die zweite Klassen, Attribute und Pseudoklassen, die dritte Elemente und Pseudoelemente. Verglichen wird von links, 1,0,0 schlägt also 0,10,0.
Welche Regel gewinnt, wenn zwei Selektoren dasselbe Element treffen?
Die mit der höheren Spezifität. Die Reihenfolge lautet Stil im Attribut, dann IDs, dann Klassen, Attribute und Pseudoklassen, dann Elemente. Der Universalselektor zählt null, und !important setzt sich über alles hinweg.
Warum lohnt es sich, die Spezifität niedrig zu halten?
Eine niedrige, vorhersagbare Spezifität macht offensichtlich, welche Regel greift, und erspart den Griff zu !important, um Stile zu flicken. Zwei Selektoren vorher zu vergleichen verhindert Überraschungen.