Das Problem: Beim „stylen“ einer Webseite mittels CSS kann es immer mal wieder vorkommen, dass auf ein Element einer Seite (z.B. ein <h1> Element) mehrere Deklarationen aus verschiedenen Stylesheet zutreffen.
Welche Deklaration gibt nun das Aussehen vor?
Die CSS-Kaskade
Um die oben genannte Problematik zu lösen, gibt es seit CSS 2.1 fest eingeführte Regeln, die festlegen, in welcher Reihenfolge die Deklarationen der verschiedenen Stylesheets gewichtet werden. Beginnen wir mit Ebene 1, der am wenigsten gewichteten Regel.
Ebene 1: Browser-Stylesheets
Jeder Browser definiert selbst gewisse Regeln, wie bestimmte Elemente auszusehen haben. Diese Regeln werden als erstes angewendet, werden aber auch am einfachsten bzw. als erstes überschrieben. Ein Beispiel dafür ist der Standard-Abstand des <body> Elements zum Browserrand. Dieser muss – falls gewünscht – durch den Autor einer Webseite entfernt werden.
Ebene 2: User-Stylesheets
Bei User-Stylesheets handelt es sich um Einstellungen des Benutzers im Browser, die ebenfalls das Erscheinungsbild einer Webseite beeinflussen. Zum Beispiel die Definition einer bestimmten Schriftgröße.
Ebene 3: Autoren-Stylesheets
Dies sind die Stylesheets, die durch den Autoren – also durch den Entwickler – einer Webseite bei der Webseitenerstellung definiert werden.
Alle vom Autor definierten Stylesheets führen bei der Darstellung einer Webseite zu einem Gesamtstylesheet, in dem ebenfalls ein Element an mehreren Stellen, unterschiedliche Deklarationen bekommen kann, die sich überschneiden. Hier gilt: Je näher die Deklaration am Element ist, desto mächtiger ist sie.
Die Reihenfolge (in ihrer Priorität aufsteigend):
- externe CSS-Anweisungen
- interne CSS-Anweisungen
- style-Anweisungen direkt im Tag
Ebene 4: !important
Ist eine CSS-Deklaration mit dem Schlüsselwort „!important“ versehen, wird sie immer den anderen Deklarationen bevorzugt. Sollten zwei Deklarationen mit „!important“ versehen sein und auf ein Element zutreffen, gilt die zuletzt ausgegebene Deklaration.
Gewichtung der Selektoren durch die Spezifität
Bisher haben wir nur zwischen Browser-, Benutzer- und Autoren-Stylesheets unterschieden und haben festgestellt, dass alle CSS-Deklarationen die mit einem „!important“ versehen wurden immer Vorrang haben.
Doch auch unter den Selektoren gibt es bestimmte Prioritäten. Ich bin mir nicht sicher inwiefern die Spezifität für die Zwischenprüfung eine Rolle spielt, trotzdem wollen wir kurz darauf eingehen:
Was sind überhaupt Selektoren?
Definieren wir das Aussehen eines HTML-Elements via CSS, muss dieses zu gestaltende Element auf irgendeine Weise direkt oder indirekt „angesprochen“ werden. Dafür werden sogenannte Selektoren genutzt. Sie können ein Element-Typ generell ansprechen (z.B. eine Headline h1) oder auch spezifisch auf ein Element mit einer festgelegten ID eingehen (z.B. #footer). Auch Kombinationen von Selektoren sind möglich.
Die Selektoren:
Selektor | Bezeichnung | Bedeutung |
* | Universalselektor | alle Elemente |
X | Typselektor | Element X |
X.klasse | Klassenselektor | Element X mit der Klasse .klasse |
X#name | ID-Selektor | Element X mit der ID name |
Pseudoklassen:
Pseudoklassen können Elemente mit bestimmten Zuständen ansprechen.
Zum Beispiel „a:hover“ spricht die Links („a“) an, auf denen sich die Maus gerade befindet (=Mouseover). Oder „p:first-of-type“ spricht den ersten Absatz („p“) innerhalb eines Elementes (z.B. „div“) an.
Die Spezifität
Um die Relevanz bzw. Priorität dieser Selektoren nun herauszufinden, wird ein Wert berechnet, der dessen Durchsetzungsfähigkeit festlegt. Dieser Wer lässt sich anhand eines Zahlenwertes ausdrücken, der mittels Tabelle errechnet wird.
- Kategorie A erhält den Wert 1, wenn die CSS-Deklarationen direkt im style-Attribut eines HTML-Elements notiert sind.
- Kategorie B erhält den Wert 1 für ID-Selektoren („X#name“)
- Kategorie C entspricht der Anzahl der von einem Selektor betroffenen Klassen und Pseudoklassen
- Kategorie D entspricht der Anzahl der von einem Selektor betroffenen Elemente und Pseudo-Elemente
Beispiele:
Selektor | A | B | C | D |
a:link | 0 | 0 | 1 | 1 |
.xyz | 0 | 0 | 1 | 0 |
#nav a.xyz | 0 | 1 | 1 | 1 |
li a | 0 | 0 | 0 | 2 |
#nav li a | 0 | 1 | 0 | 2 |
Um die Spezifität nun als Wert vorliegen zu haben, werden die Zahlen der Reihe nach von Kategorie A bis Kategorie D hintereinander Weg geschrieben. Deklarationen mit einem höheren Wert (also einer höheren Spezifität) überschreiben die Deklarationen, mit einer niedrigeren Spezifität.
Im oberen Beispiel beschreiben alle Selektoren das gleiche Element:
Die Deklarationen von „#nav a.xyz“ treffen aufgrund der höheren Spezifität auf das Element zu und werden angewendet.
Sortierung nach Vorkommen
Haben zwei oder mehrere Selektoren die gleiche Spezifität und sprechen das gleiche Element an, so entscheidet die Reihenfolge der Vorkommens. Da Browser den Quelltext einer Seite von oben nach unten auslesen, zählt der zuletzt notierte Selektor.
Habt ihr Ergänzungen oder Verbesserungen? Ab damit in die Kommentare!
Donnerstag, 4. April 2013 um 16:51
Schöner Artikel, kann ich nach meiner COBI Online Zeit noch besser nachvollziehen 🙂