Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)

NEU:
WordPress 4

Einstieg in CSS (Cover)

Inhaltsbereich

6.5 Spezifität: das Punktesystem für Selektoren

Sobald Stylesheets ein bisschen länger werden, gibt es früher oder später für ein HTML-Element mehrere CSS-Regeln, die sich zum Teil widersprechen. Die Frage ist, wie der Browser in solchen Konfliktfällen entscheidet.

Einer wird gewinnen: So funktioniert Spezifität

Die Lösung für dieses Entscheidungsproblem ist ganz einfach: Der Browser berechnet anhand eines einfachen Punktesystems, welcher Selektor der wichtigste ist.

Im CSS-Jargon heißt dieses Punktesystem "specificity", auf Deutsch" Spezifität" oder manchmal auch "Spezifizität". Komisches Wort für eine einfache Sache.

Die folgende Tabelle zeigt die Punkteverteilung:

Selektortyp Beispiel Punkte
einfacher Typ-Selektor p 1
Klasse .infobox 10
Pseudoklasse :visited 10
ID #navibereich 100
Attribut style="" style="color: red;" 1000

Bei verschachtelten Selektoren werden die Punktzahlen für die einzelnen Selektoren addiert, bei mit einem Komma gruppierten Selektoren nicht.

Ein paar Beispiele für die Punktewertung

Hier ein paar Beispiele für die Spezifität von Selektoren:

Selektor Beschreibung Punkte Gesamt
body Typ-Selektor 1 1
h1, h2 gruppiert je 1 je 1
a:visited Typ und Pseudoklasse 1+10 11
.infobox ungebundene Klasse 10 10
p.infobox gebundene Klasse 1+10 11
#navibereich ungebundene ID 100 100
div#navibereich Typ + ID 1+100 101
#navibereich a ID + Typ 100+1 101
#navibereich a:visited ID + Typ + Pseudoklasse 100+1+10 111
#startseite #navibereich ID + ID 100+100 200
<p style="color: red;"> Attribut style 1000 1000

Bei einem Unentschieden gibt es übrigens weder Verlängerung noch Elfmeterschießen. Bei gleichem Punktestand entscheidet die Reihenfolge im Stylesheet: Es gewinnt die am weitesten unten notierte Regel, ganz nach dem biblischen Motto »Die Letzten werden die Ersten sein«.

Im Abschnitt über die Gestaltung eines horizontalen Navigationsbereichs erleben Sie dieses Punktesystem in Aktion und im Kapitel über die namensstiftende Kaskade erfahren Sie, welche Rolle die Spezifität in der Kaskade spielt.

Die Spezifität ist in Wirklichkeit eine Matrix …

In CSS 1 hat das W3C die Spezifität tatsächlich als ein Punktesystem (»score«) behandelt:

In CSS 2.1 wird die Berechnung der Spezifität etwas abstrakter als eine Matrix aus vier voneinander getrennten Werten beschrieben:

Dieser Unterschied ist aber zumindest für Einsteiger eher akademischer Natur, denn solange ein Selektor nicht mehr als 10 IDs oder 10 Klassen aufweist, kommt man mit beiden Methoden zum selben Ergebnis, und das Punktesystem ist für die meisten Einsteiger einfacher zu begreifen.

Falls Sie die Matrix-Variante genauer interessiert, hat Klaus Langenberg von The Styleworks das wunderbar erklärt:

Sparsam benutzen: !important

Wenn Sie möchten, dass der Browser eine ganz bestimmte Eigenschaft auf jeden Fall verwendet, egal was bei der Berechnung der Spezifität herauskommt, können Sie dieser Eigenschaft sagen, dass sie wichtig ist:

h2 { color: red !important; }

Beachten Sie, dass nach dem Wert eine Leerstelle folgt, die Zeichenfolge !important aber noch vor dem abschließenden Semikolon steht. 

Im Kapitel über die Kaskade erfahren Sie, warum Eigenschaften mit !important im Punktesystem quasi außer Konkurrenz mitlaufen und trotzdem immer gewinnen.

Übersicht: Weitere Selektoren

In dieser Einführung lernen Sie nur die wichtigsten Selektoren kennen, aber es gibt noch einige mehr mit so schönen Namen wie z. B. Kind und Nachbarn-Selektoren. Eine ausführliche Übersicht finden Sie auf der folgenden Seite: