Weitere Infos
Sie lesen:
LB1 (2009)
Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
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:
