CSS-Spezifität

css-spezifizitaet

Wenn Ihr die volle Kontrolle über euren CSS-Code erlangen wollt und gleichzeitig die Code-Qualität eurer Website verbessern möchtet, solltet ihr wissen was CSS-Spezifität ist. Die CSS-Spezifität beschreibt die unterschiedliche Gewichtung von CSS-Selektoren und hilft euch dabei zu verstehen welchen Selektor der Browser interpretiert.
Wenn ihr schon einmal einen CSS-Befehl geschrieben habt, der aus unerklärlichen Gründen vom Browser ignoriert wurde ist dieser Artikel sicher hilfreich. Wenn ihr schon einmal den !important-Befehl verwendet habt, weil ein Effekt anders nicht erreicht werden konnte, ist dieser Artikel Pflicht.

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

Browser lesen von oben nach unten

Wenn ein CSS-Selektor mehrfach im Dokument steht gibt es einen Konflikt. In diesem Fall interpretiert der Browser immer die zuletzt notierte Regel. Eine im Stylesheet unten notierte Regel überschreibt also alle zuvor notierten identischen Selektoren. Das folgende Beispiel zeigt einen typischen Fall. Das Link-Element würde hier rot dargestellt.

#nav-main ul li a { color:black; }

#nav-main ul li a { color:red;}

CSS-Spezifität

Eine CSS-Regel wird nur dann von einer weiter unten notierten Regel überschrieben, wenn beide Selektoren identisch sind und das gleiche „Gewicht“ haben.

Jede ID, jede Klasse und jedes HTML-Element (Tag) hat ein festgelegtes Gewicht das nicht verändert werden kann. Das Gewicht des gesamten CSS-Selektors bestimmt sich durch die Summe der einzelnen Bestandteile. Der Browser interpretiert im Konfliktfall immer die Regel mit dem höchsten Gewicht, auch wenn diese Regel weiter oben im Quellcode steht. Dieses Verhalten nennt man CSS-Spezifität.

Damit ihr berechnen könnt welcher Selektor vom Browser interpretiert wird müsst ihr natürlich wissen welches Gewicht die einzelnen Elemente haben. Folgende Punktwerte vereinfachen das Verständnis der W3C-Spezifikation.

  • HTML-Elemente (z.b. h1, p, blockquote ) = 1 Punkt
  • CSS-Klassen (z.B. .alert, .js) = 10 Punkte
  • Pseudo-Klassen/Elemente (z.B. :nth-of-type) = 10 Punkte
  • CSS-IDs (z.B. #container, #header) = 100 Punkte
  • Inline-Styles (z.B. <h1 style="color: red;"></h1>) = 1000 Punkte
  • !important !important gewinnt immer, es sei denn mehere Selektoren haben ein !important erhalten.

Das folgende Beispiel zeigt einen weiteren typischen Anwendungsfall. Stellt euch einen Header mit enthaltener Hauptnavigation vor:

#header a {
   color:black;
}

ul.nav-main li.active a {
   color:red;
}

Der obere Selektor hat ein Gewicht von 101 (100 + 1), der untere Selektor hat ein Gewicht von 23 (1 + 10 + 1 + 10 + 1). Die Links in der Navigation werden daher schwarz dargestellt. Die untere Regel wird überschrieben, da sie weniger Gewicht hat.

CSS-Spezifität in den Developer-Tools von Google Chrome
CSS-Spezifität in den Developer-Tools von Google Chrome

Verschiedene Beispiele

.js nav#nav-main li { ... }

Der Selektor hat ein Gewicht von 112 (10 + 1 + 100 + 1).

blockquote p a { ... }

Der Selektor hat ein Gewicht von 3 (1 + 1 + 1).

.author h1 {}

Der Selektor hat ein Gewicht von 11 (10 + 1).

ul li:nth-of-type(odd) { ... }

Der Selektor hat ein Gewicht von 12 (1 + 1 + 10).

!important

Wenn eine Eigenschaft unbedingt angezeigt werden soll, könnt ihr !important verwenden. In diesem Fall wird ein identischer Selektor ohne !important überschrieben. Achtet allerdings darauf, dass ihr diese Methode sparsam oder noch besser gar nicht einsetzt.

#nav-main ul li a { color:black !important; }

#nav-main ul li a { color:red;}

In diesem Beispiel wird die obere Regel interpretiert, da sie identisch zur unteren Regel ist und ein !important enthält.

Attributselektoren statt IDs

Wenn ihr die Spezifität niedrig halten möchtet ohne auf IDs zu verzichten, verwendet Attributselektoren. Die Gewichtung der Selektoren findet ja im CSS-Code statt und nicht im HTML-Markup. Achtet bei dieser Technik allerdings auf den Browser-Support für Attributselektoren.

[id="nav-main"] { … }

anstelle von:

#nav-main { … }

Fazit

Wenn ihr die CSS-Spezifität beherrscht, kann das sehr positive Auswirkungen auf die Code-Qualität eurer Websites haben. Selektoren mit geringen Gewicht sollten im Dokument möglichst weit nach oben geschrieben werden, da diese Elemente häufig später überschrieben werden. Da IDs im Vergleich zu Klassen ein sehr hohes Gewicht haben (100 zu 10) solltet ihr darauf achten nicht zu viele IDs einzusetzen.
Die Holzhammermethode !important und Inline-Styles sollten nach Möglichkeit gar nicht eingesetzt werden, da sie sich nur sehr schwer wieder überschreiben lassen und dem Dokument Flexibilität nehmen.

Quellen / Links