Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

11.5 3. Sortiere nach Reihenfolge

Für das Beispiel ist die Suche für den Browser wie gesagt eigentlich erledigt, aber es kann noch eine weitere Stufe der Kaskade geben, nämlich die Sortierung nach der Reihenfolge des Auftretens im Quelltext.

Schauen Sie sich folgenden fiktiven Style an:

01 #navibereich ul {
02   margin: 20px;
03   margin-bottom: 0;
04 }

In diesem Fall wird margin-bottom genau genommen gleich zweimal beschrieben. In Zeile 2 werden in Kurzschreibweise 20px unterer Außenabstand definiert, in Zeile 3 hingegen explizit 0. Da beide Deklarationen dieselbe Wichtigkeit (Stufe 3) und eine gleich hohe Spezifität (101 Punkte) haben, sortiert der Browser nach Reihenfolge:

  • Wenn zwei Deklarationen aus demselben Stylesheet stammen und sowohl die gleiche Wichtigkeit als auch die gleiche Spezifität haben, gewinnt die zuletzt notierte Anweisung.

Die zuletzt notierte Anweisung. Also je dichter am zu gestaltenden Element die Deklaration steht, desto vorrangiger ist sie. Dabei liest der Browser von links nach rechts und von oben nach unten. Im Listing etwas weiter oben gilt also der Wert margin-bottom: 0.

Nach dieser Runde gibt es in jedem Fall eine Entscheidung und die Kaskade ist beendet.