CSS-Spezifität

Die CSS-Spezifität bestimmt, welche Regel angewendet wird, wenn mehrere Styles auf dasselbe Element zutreffen. Sie ist entscheidend, um Konflikte in Stylesheets zu verstehen.

Grundbegriffe

Die Spezifität ist ein Zahlenwert, den der Browser zur Gewichtung der Regeln verwendet. Elemente, Klassen und IDs haben unterschiedliche Punktwerte.

Das folgende Beispiel zeigt, wie sich Element-, Klassen- und ID-Selektoren durchsetzen.

Punktesystem

Die Spezifitätswerte setzen sich aus verschiedenen Kategorien zusammen: Inline-Stile, IDs, Klassen und Elemente. Je höher die Punktzahl, desto stärker ist die Regel.

Selektor	Spezifitätswert
Element selector (p, div)	0-0-1
Class selector (.class)	0-1-0
ID selector (#id)	1-0-0
Inline style	1-0-0-0 (highest)

Die Verwendung von !important

Die Deklaration !important überschreibt alle Spezifität, daher sollte sie mit Vorsicht eingesetzt werden. Verwende sie nur, wenn es wirklich keine andere Lösung gibt.

Tipps zur Spezifität

Das richtige Management der Spezifität hilft, den Code sauber zu halten und fehlerhafte Darstellungen zu vermeiden. Hier einige praktische Ratschläge:

Vermeide Selektoren mit zu hoher Spezifität, damit ein Überschreiben einfacher bleibt.
Strukturiere logisch und verwende lieber Klassen als IDs.
Halte die Verwendung von !important auf ein Minimum, um unübersichtliche Konflikte zu vermeiden.