Der eigene Onlineshop für Fotografen

Workshop HTML5 & CSS3 - Stephan Heller

Bestimmung der Spezifität

Die Bestimmung der Spezifität und die Bedeutung, die sich daraus ergibt, ist ausführlich im Buch beschrieben. Diese Seite liefert weitere Beispiele als Ergänzung zum Buch.

Unterschiedliche Einfachselektoren haben jeweils eine bestimmte »Gewichtung«. Für die einzelnen Spalten gilt folgender Grundsatz: Wenn eine Spezifität im Feld A zutrifft, spielen untergeordnete Spezifitäten keine Rolle, selbst wenn in einem untergeordneten Feld mehr Spezifitätspunkte erreicht würden. Entsprechend übertrumpft eine B-Gewichtung alle C- und D-Gewichtungen usw.

Folgende Beispiele zeigen, zu welcher Spezifität sich Selektoren kumulieren.

Nr. Beispiel A B C D
1. #inhalt 1
2. #inhalt li 1 1
3. #inhalt li.aktiv 1 1 1
4. #inhalt ul li.aktiv 1 1 2
5. .abschnitt ul li.aktiv 2 2
6. .abschnitt ul li.aktiv:hover 3 2
7. #inhalt a:hover 1 1 1
8. <p style="color: red"> 1

In der Zeile Nr. 3 besteht der Selektor jeweils aus einem ID-, einem Typ- und einem Klassenselektor, hier wird für die Spalten B, C und D jeweils eine einfache Spezifität erfasst.

In der Zeile Nr. 4 finden sich im Selektor zwei Elementselektoren, demnach werden in der Spalte D 2 Zähler für die Spezifität ermittelt.

Vor allem: Inline-Styles haben die höchste Spezifität!

Buchempfehlungen