Wertigkeit (Spezifität) von CSS-Selektoren (Klassen und IDs)

Wer ist nicht schon daran verzweifelt: Sie ändern eine Eigenschaft in Ihrer CSS-Datei und nichts passiert / ändert sich im Design oder Layout Ihrer Webseite. Anscheinend gibt es eine Art Hierarchie die Änderungen niedriger Ordnung ignorieren.

Es ist tatsächlich so, dass es eine Art Hierarchie für CSS-Selektoren (Klassen und IDs) im CSS gibt. Diese ist abhängig von der Gewichtung, dem Ursprung, der Spezifität und der Reihenfolge in der CSS-Eigenschaften ausgeführt werden.

Demnach kommen Style-Sheet-Dateien in folgender Reihenfolge und Gewichtung zum Einsatz:

  1. Benutzer-Stylesheet mit !Important-Anweisungen
  2. Autoren-Stylesheet mit !Important-Anweisungen
  3. Autoren-Stylesheet
  4. Benutzer-Stylesheet
  5. Browser-Stylesheet

Die höhere Priorität der Benutzer-Stylesheet mit !Important-Anweisungen liegt in der Tatsache, dass so Menschen mit körperlichen Defiziten (Barrierefeiheit) auf diese Weise „das letzte Wort“ darüber haben, wie eine Internetseite auf dem Bildschirm nun dargestellt werden soll.

Innerhalb von Stylesheet-Dateien weisen Selektoren (Klassen und IDs) unterschiedliche hohe Spezifitäten auf. Die Ermittlung der jeweiligen Spezifität ist denkbar einfach: Selektoren werden in vier verschiedene Gruppen unterschieden. Jede Gruppe hat eine bestimmte Wertigkeit (Spezifität) wie in der folgenden Tabelle dargestellt.

Gruppe Selektortyp Beispiel Wertigkeit (Spezifität)
A Attribut style=”…” <p style=”color: red;”> 1000
B ID #wrapper 100
C Klasse .info 10
D einfacher Selektor <div> 1

Wertigkeits-Beispiele ausgewählter CSS-Eigenschaften:

Beispiel-Selektor A B C D
<p style=”color: red;”>roter Text</p> 1 0 0 0
#wrapper #info .fehler {color:red;} 0 2 1 0
body #wrapper div#left p{color:red;} 0 2 0 3
#wrapper p.info {color:red;} 0 1 1 1
p.red {color:red;} 0 0 1 1
p {color:red;} 0 0 0 1

CSS-Eigenschaften mit einer niedrigeren Spezifität werden von höherwertigen Eigenschaften „überschrieben“. Die höchste Wertigkeit (Gruppe A) ist jedoch aus praktischer Sicht für die Gestaltung und Pflege einer Internetseite nicht zu empfehlen. Insbesondere, da dies nicht mehr dem Prinzip von HTML und CSS, also der Trennung von Inhalt und Design, entspricht.