Hauptmenü

Untermenü

Advanced CSS - Spezifität - Grundlagen

1. Selektor-Typen

Beim Punkt Definition habe ich euch schon darauf hingewiesen, dass es vier Möglichkeiten gibt, um einem HTML-Element eine CSS-Deklaration zuzuweisen. Und bei den Regeln zur Gewichtung habe ich auch schon die "Wertigkeit" der verschiedenen Selektoren erklärt.

Soweit ist es eigentlich ganz einfach. Aber was passiert, wenn man mit den so genannten Nachfolge-Selektoren arbeitet? Oder einem Element unterschiedliche Anweisungen zuweist, also zum Beispiel Elementtypen, Klassen und IDs?

Gottlob haben uns da die Götter des W3C ein paar einfache Gesetze an die Hand gegeben, mit denen man spielend leicht herausfindet, welche Anweisung nun eine andere überschreibt.

2. Das Prinzip

Jeder Selektor-Typ wird mit einem fortlaufenden Buchstaben versehen. Dabei gilt dann grundsätzlich die Reihenfolge, die ich schon hier unter dem Punkt "Gewichtungsregeln §2" beschrieben habe. Es wird also pro "Typ" ein Buchstabe gesetzt und mit einer Zahl versehen, die sich aus der Menge der vorkommenden Selektoren ergibt. Dabei gilt folgende einfache Regel:

Selektor A B C D
style 1 0 0 0
ID-Attribute 0 1 0 0
Klassen-Attribute und Pseudoklassen 0 0 1 0
HTML-Elemente und Pseudoelemente 0 0 0 1

Bei der Bewertung der "Wertigkeit" wird nun nach den Buchstaben vorgegangen. Zuerst zählt der höchste A-Wert, danach kommt der höchste B-Wert und so fort. Man muss sich das so vorstellen wie den Medaillenspiegel bei den Olympischen Spiegeln. Da zählt zuerst die größte Anzahl an Goldmedaillen und dann erst kommen die anderen. Die eigentliche Raffinesse liegt also in der Addition der Zuweisungen.

3. Ein paar Beispiele

Selektor A B C D Wertigkeit
style="..." 1 0 0 0 1 - 0 - 0 - 0
#bla a 0 1 0 1 0 - 1 - 0 - 1
#bla li a 0 1 0 2 0 - 1 - 0 - 2
.blubb #bla li 0 1 1 1 0 - 1 - 1 - 1
#blubber .blubb #bla li 0 2 1 1 0 - 2 - 1 - 1

Erläuterung

Wie wir unschwer erkennen können, kann das style nur eine 1 haben, gewinnt aber trotzdem immer. Bei #bla a haben wir ein ID- und ein Elementattribut, bekommen also als Ergebnis 0-1-0-1. Bei #bla li a gibt es dagegen eine ID- und zwei(!) Elementattribute, .blubb #bla li hat dementsprechend ein Klassen-, ein ID- und ein Elementattribut. Das letzte Beispiel erklärt sich dann wohl von selbst.

Und was ist hiermit?

Selektor A B C D Wertigkeit
#blubber .blubb #bla li a 0 2 1 2 0 - 2 - 1 - 2
#blubber #bla .blubb li a 0 2 1 2 0 - 2 - 1 - 2

Nun, zunächst erst mal gar nichts. Beide Anweisungen haben dieselbe "Wertigkeit", also 0-2-1-2. Dies ist aber eine ganz andere Geschichte. Und darauf gehe ich bei dem Punkt Nachfolge-Selektoren ein, damit ihr euch der grundsätzlichen(!) Problematik bewusst werdet.

4. "Verbotene" HTML-Attribute

Sollte trotz aller Ermahnungen noch jemand nolens volens mit Attributen arbeiten, die als "deprecated", also missbilligt, eingestuft wurden, so habe ich je nach Situation entweder eine gute oder schlechte Nachricht für euch. Deren "Wertigkeit" ist nämlich null, nada, niente, nüscht! So wird ein


<td align="right">Bla Blubb</td>

jederzeit von einen


td
{
  text-alignleft;
}

überschrieben. Und das ist auch gut so.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt