Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.


Selektoren, Kaskaden, Spezifität

Relativ einfach zu verstehen und übersichtlich anzuwenden ist die Kaskadenregel, dass immer die jüngste CSS-Eigenschaft gilt und am jüngsten sind jene Codezeilen, die der Browser zuletzt liesst. Zu beachten ist, dass der Browser 3 mal Styles liest:

  • 1. Externes Stylesheet
  • 2. CSS-Definitionen im Head
  • 3. Inline-Styles

Deshalb ist es ratsam, Styles nur auf eine Art anzuwenden – bevorzugterweise per externem File. Genau genommen, liest der Browser ganz zuerst sein eigenenes CSS, welches uns die Times und all die seltsamen Abstände beschert. Das können wir soweit ignorieren, weil wir diese Styles nicht bearbeiten wollen.

Spezifität

Etwas anspruchsvoller wird es, wenn man verschiedene Arten von Selektoren mischt. Es gibt eine klare Hackordnung, wer der Stärkste ist. Dabei wird die erste Kaskadenregel ignoriert und die Reihenfolge spielt keine Rolle mehr. Die Ordnung beruht als erstes auf der vermeintlichen Häufigkeit von Elementen:

  • Der Universal-Selektor* – ist am schwächsten, weil einfach alles gemeint ist.
  • Der Typ-Selektor – z.B. h1 – spricht alle HTML-Elemente eines bestimmten Typs an.
  • Der Class-Selektor – z.B. .Lead – wählt alle HTML-Elemente mit der Klasse «Lead» an.
  • Der ID-Selektor – z.B. #Fuss – ist am stärksten weil er nur jenes Element mit der ID «Fuss» anspricht und IDs dürfen pro Page/File nur einmal vorkommen. (Es kann nur einen Fuss geben!)

Beispiel: Die Headlines Stufe 1 haben alle die Schriftfarbe lightgrey. Die mittlere hat die Klasse «Ziegel» und wird mit einer neuen Farbe überschrieben – egal auf welcher Zeile im CSS dies notiert ist. Probierts aus.

561

Noch spezifischer

Arbeitet man mit verschachtelten Selektoren, wirds noch anpruchsvoller. Je genauer ein Selektor bzw. ein verschachtelter Selektoren ein Element einzugrenzen vermag, desto stärker ist er. Stärker bedeutet auch hier, dass er Schwächere überschreibt, egal ob sie jünger oder älter sind. Hier das Ranking mit dem Beispiel eines Strong-Elements (immer pink), angefangen mit dem schwächsten Selektor.

* alle Elemente
strong alle strong-Elemente
h1 strong alle strong-Elemente innerhalb von h1-Elementen
.Schrauben strong alle strong-Elemente innerhalb Elementen mit der Klasse «Schrauben»
.Speichen alle Elemente mit der Klasse «Speichen»
h1 .Speichen alle Elemente mit der Klasse «Speichen» innerhalb von h1-Elementen
.Raeder .Speichen alle Elemente mit der Klasse «Speichen» innerhalb von Elementen mit der Klasse «Raeder»
#Velo strong alle Strong-Elemente innerhalb des Elements mit der ID «Velo»
#Velo .Speichen alle Elemente mit der Klasse «Speichen» innerhalb des Elements mit der ID «Velo»
#Fahrzeug das Element mit der ID «Fahrzeug»

Vergesst nicht, dass auch Attribut-Selektoren von diesem Ranking betroffen sind. Ich verzichte der Übersichtlichkeit zu liebe darauf, sie in die Tabelle zu integrieren. Aber sie spezifizieren natürlich jeden Selektor nochmals um eine Stufe. So ist ein img[title] stärker als ein img und ein img[title="bla"] nochmals stärker. Ebenfalls betroffen sind natürlich alle Pseudo-Klassen und Pseudo-Elemente.

Notfall-Hack

Sollte man irgendwo Mühe haben, dieser Selektorengewichtung Herr zu werden, sei es aufgrund von Plugins oder haarsträubenden Templates oder sonst was, so kann man mit !important jede Eigenschaft, egal wo, an die Spitze der Hackordnung befördern. Ich rate dringend davon ab, dies aus einer Bequemlichkeit heraus zu tun, da diese «Hacks» eben oben erklärte Ordnung versauen. Angewand wird er so:

p { background-color:lightgrey !important }

Verantwortlich:
Jürgen Wössner
E-Mail

Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.

Aber mit so einem kleinen Bildschirm hier ist das ganze echt nutzlos. Geh mal rüber an einen grösseren Bildschirm.