Teil 7: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign

Daraus folgt, dass die größte Gewichtung dem ID-Selektor h2#main zugeschrieben wird. Auf Position zwei folgt im Beispiel der Klassenselektor h2.navigation.

4: Sortieren der CSS-Selektoren nach Reihenfolge

Was passiert nun aber, wenn zwei CSS-Regeln genau dieselbe Gewichtung, denselben Ursprung und dieselbe Spezifität besitzen? In diesem Fall kommt es auf die Reihenfolge an, in der die betreffenden Deklarationen aufgelistet wurden.

Diejenigen Deklarationen, die später gelistet sind, überschreiben frühere Deklarationen für dasselbe Element. Hierbei werden importierte Stylesheets vor eingebetteten CSS-Regeln ausgewertet.

Bugs in Webbrowsern

Wer die Möglichkeiten von Cascading Stylesheets wirklich ausreizen möchte, muss CSS-Selektoren richtig in den Griff bekommen. Diese sind sehr leistungsfähig, aber leider auch nur, solange der betreffende Webbrowser mitspielt. Wenn ein CSS-basiertes Layout wider Erwarten nicht so wie geplant ausfällt, ist die Ursache daher sehr häufig im Bereich der Unterstützung von CSS-Selektoren zu suchen.

Pseudoklassen versus Pseudoelemente

Pseudoklassen und Pseudoelemente werden des Öfteren miteinander verwechselt. Pseudoklassen sind Selektoren, die von dem Zustand eines existierenden Elementes abhängen. Sie verhalten sich zwar wie Klassen (Selektoren), indem sie sich auf tatsächlich existente Elemente beziehen, aber sie sind doch nicht Klassenselektoren, denn der Strukturbaum des Dokumentes (mithilfe der verwendeten Auszeichnungssprache) liefert keinerlei expliziten Hinweise auf diese Selektoren.

Ein typisches Beispiel hierfür sind Link-bezogene Pseudoklassen (PseudolinkKlassen). Sie behandeln ein Element wie

ganz so, als ob es sich dabei um einen hypothetischen Quelltext in der Form

oder um diesen (ebenfalls imaginären) Quelltext handelte:

Pseudoelemente sind Selektoren, die von dem Vorhandensein eines Elementes in dem Strukturbaum des Dokumentes ausgehen, welches dort nicht existiert - ganz so als ob der Browser dieses fehlende Element erzeugen würde. Ein typisches Beispiel eines Pseudoelementes ist :first-letter

Mithilfe des Selektors p:first-letter kann beispielsweise ein Absatz

so gehandhabt werden, als ob der Strukturbaum des Dokumentes tatsächlich die Auszeichnung eines solchen Elementes enthielte. Das folgende Beispiel dient lediglich zur Visualisierung und repräsentiert keinen gültigen Quelltext:

Demnach handelt es sich bei :first-child

um eine Pseudoklasse, nicht um ein Pseudoelement. Diese Pseudoklasse fügt eine CSS-Definition einem existierenden Element hinzu, ohne ein neues Element in der Dokumentstruktur zu erzeugen. Zum Beispiel hat der Selektor li:first-child dieselbe Wirkung, die sich durch die Zuweisung der Klasse first-child zu dem ersten li-Element der Liste erzielen ließe.