CSS-Spezifität – Cheat Sheet 🏅
Worum geht’s?
Treffen mehrere CSS-Regeln dasselbe Element und setzen dieselbe Eigenschaft (z. B. color), muss der Browser entscheiden, welche gewinnt. Er wählt die Regel mit der höchsten Spezifität.
Der Medaillenspiegel
Jeder Teil eines Selektors bringt eine Medaille:
| Selektor-Typ | Beispiel | Medaille | zählt als |
|---|---|---|---|
| ID | #main | 🥇 Gold | (1, 0, 0) |
| Klasse | .card | 🥈 Silber | (0, 1, 0) |
| Tag / Element | p | 🥉 Bronze | (0, 0, 1) |
| Universalselektor | * | – keine – | (0, 0, 0) |
| Kombinatoren | > + ~ | – keine – | (0, 0, 0) |
Wie bei Olympia: Ein Land mit 1× Gold steht vor einem Land mit 50× Silber.
Die Vergleichsregel
Selektor A gegen Selektor B
│
Mehr Gold (IDs)? ───── ja ────▶ gewinnt
│ gleich
Mehr Silber (Klassen)? ─ ja ───▶ gewinnt
│ gleich
Mehr Bronze (Tags)? ─── ja ────▶ gewinnt
│ gleich
Steht später im CSS ──────────▶ gewinnt
Es wird nie umgerechnet. 11 Klassen werden nicht zu 1 ID. Die nächste Stelle zählt nur bei Gleichstand.
Beispiele
| Selektor | 🥇 | 🥈 | 🥉 | Kurzform |
|---|---|---|---|---|
* | 0 | 0 | 0 | 0.0.0 |
li | 0 | 0 | 1 | 0.0.1 |
ul li | 0 | 0 | 2 | 0.0.2 |
ul > li | 0 | 0 | 2 | 0.0.2 ← > zählt nicht |
h2 + p | 0 | 0 | 2 | 0.0.2 ← + zählt nicht |
.card | 0 | 1 | 0 | 0.1.0 |
* .card | 0 | 1 | 0 | 0.1.0 ← * zählt nicht |
p.intro | 0 | 1 | 1 | 0.1.1 |
nav .link.active | 0 | 2 | 1 | 0.2.1 |
#main | 1 | 0 | 0 | 1.0.0 |
#main .card p | 1 | 1 | 1 | 1.1.1 |
Technische Brücke: Versionsnummern 💾
Spezifität funktioniert genau wie Versionsnummern bei Software-Updates:
| Vergleich | Neuer / stärker | Warum |
|---|---|---|
1.0.0 vs 0.11.0 | 1.0.0 | erste Stelle entscheidet |
0.2.0 vs 0.1.15 | 0.2.0 | erste gleich → zweite entscheidet |
0.10.0 vs 0.9.0 | 0.10.0 | 10 > 9 – keine Dezimalzahl! |
→ Spezifität ist keine Zahl wie „100“, sondern eine Version wie 1.0.0.
Duelle
| Selektor A | Selektor B | Sieger | Begründung |
|---|---|---|---|
div p span (0.0.3) | .text (0.1.0) | B | 1 Silber schlägt 3 Bronze |
.a .b .c .d .e .f .g .h .i .j .k (0.11.0) | #x (1.0.0) | B | 1 Gold schlägt 11 Silber |
#nav a (1.0.1) | #nav .link (1.1.0) | B | Gold gleich → mehr Silber |
ul li (0.0.2) | ol > li (0.0.2) | später im CSS | Gleichstand |
Sonderwertungen (über dem Medaillenspiegel)
| Was | Wirkung | Empfehlung |
|---|---|---|
Inline-Style <p style="color:red"> | schlägt jeden Selektor | vermeiden – schwer zu überschreiben |
!important | schlägt sogar Inline-Styles | nur im Notfall |
Typische Denkfehler
| ❌ Falsch | ✅ Richtig |
|---|---|
| „ID = 100, Klasse = 10, Tag = 1 → zusammenzählen“ | Stellen werden einzeln von links verglichen |
| „Je länger der Selektor, desto stärker“ | Nur die Medaillen zählen, nicht die Länge |
„> macht den Selektor stärker“ | Kombinatoren und * zählen nichts |
| „Die untere Regel gewinnt immer“ | Nur bei gleicher Spezifität |
Merksätze
- Gold vor Silber vor Bronze – ID vor Klasse vor Tag.
- Kein Umrechnen – wie bei Versionsnummern.
- Gleichstand → die spätere Regel gewinnt.