CSS-Spezifität

Kurz: Die Spezifität entscheidet, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Element zutreffen. Je genauer der Selektor, desto höher sein Gewicht.

Genauer: Der Browser zählt für jeden Selektor drei Werte: IDs, Klassen/Attribute/Pseudo-Klassen und Elementnamen. Die Regel mit dem höheren Wert (verglichen von links nach rechts) gewinnt. Bei Gleichstand zählt die spätere Regel.

Im Detail

• Beispiele: p = (0,0,1), .karte = (0,1,0), #kopf = (1,0,0), nav a.aktiv = (0,1,2).
• Inline-Style: style="…" schlägt jeden Selektor.
• !important: Überstimmt fast alles, sollte aber die Ausnahme bleiben, weil es Fehlersuche erschwert.
• Praxis: Flache Selektoren mit Klassen halten Stile leicht überschreibbar. Tief verschachtelte Selektoren und IDs führen zu Kämpfen.
• Moderne Hilfen: @layer ordnet Regelgruppen unabhängig von der Spezifität, :where() hat die Spezifität null.

Siehe auch: Semantisches HTML