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

CSS3 bringt mit sich noch einen zusätzlichen, den sogenannten allgemeinen Geschwister-Selektor (general sibling selector), der als Trennzeichen das Symbol ~ verwendet. Dieser Selektor trifft auf beliebige Geschwisterelemente des betreffenden Elementes eines bestimmten Typs zu. Zum Beispiel werden mit dem Selektor

alle <p>-Elemente selektiert, die demselben Vorfahrenelement untergeordnet sind wie eine vorangehende h4-Überschrift.

Pseudo-Klassen

Pseudoklassen funktionieren ähnlich wie Klassen-Selektoren, außer dass sie nicht explizit in der Auszeichnung der Dokumentstruktur spezifiziert sind. Der Name einer Pseudoklasse beginnt mit einem Doppelpunkt und kann ohne Leerzeichen auf den Universalselektor oder (falls unterstützt) auf einen Klassenselektor folgen.

Zu den am häufigsten verwendeten Pseudoklassen zählen die Selektoren :link und :visited sowie die dynamischen Pseudoklassen :active, :hover und :focus. Die ersten beiden Pseudoklassen treffen seit CSS 2 nicht nur auf ein <a>-Element in seinen verschiedenen Zuständen sondern auch auf ein beliebiges anderes Link-Element zu.

CSS2 kamen außerdem zusätzlich die Pseudoklassen :lang und :first-child hinzu. Mit :lang kann ein Dokument anhand der verwendeten Sprache selektiert werden. Mittels :first-child lässt sich das erste Kind eines Selektors ansprechen.

Pseudoklassen verhalten sich ähnlich wie id-Selektoren und attribut-Selektoren, indem sie Typ-Selektoren oder den Universalselektor zusätzlich einschränken, jedoch keinerlei Elemente außerhalb des betreffenden Selektors spezifizieren. So trifft beispielsweise der Selektor

auf einen Listeneintrag zu, bei dem es sich um das erste Kind seines Vorfahrenelementes handelt (und nicht auf das erste Kind des Listeneintrags). Ein einfacher Selektor kann mehr als eine Pseudoklasse enthalten, sofern sich diese Pseudoklassen nicht gegenseitig ausschließen.

So sind die Selektoren a:link:hover und a:visited:hover sind beide gültig, aber für a:link:visited gilt dies nicht, da sich diese beiden Pseudoklassen gegenseitig ausschließen, da ein Link nicht gleichzeitig unbesucht und besucht sein kann. Die Reihenfolge der Deklarationen ist für die dynamischen Pseudoklassen :hover, :focus, und :active von entscheidender Bedeutung und hängt im Einzelfall davon ab, was man genau erzielen möchte. Das am häufigsten erwünschte Verhalten erzielt:

TIPP: Um den hover-Zustand einer Verknüpfung hervorzuheben, die auch über einen focus-Zustand verfügt, können Sie auf den Selektor a:focus:hover zurückgreifen.

Pseudo-Elemente

Bei Pseudoelementen handelt es sich um Selektoren, die auf nicht wirklich existierende Elemente zurückgreifen. Dazu zählen Inhalte, die durch CSS-Regeln erzeugt werden. Dynamische Pseudoelemente treffen auf virtuelle Elemente zu, die sich bei Benutzerinteraktionen verändern können.

In CSS1 und CSS2 beginnen die Namen von Pseudoelementen mit einem Doppelpunkt (:); ab CSS3 mit einem zweifachen Doppelpunkt (::), um sie von Pseudoklassen zu unterscheiden.

Zum Beispiel bezieht sich das Pseudoelement :before (ab CSS2) auf Inhalte, die vor einem bestimmten Element eingefügt werden. In CSS3 kommt unter anderem das Pseudoelement ::selection hinzu. Mit diesem Selektor lässt sich die aktuelle Auswahl des Benutzers auf der Webseite erfassen.

Deklarationskonflikte

Treffen zwei oder mehr Deklarationen auf dasselbe Element zu, können zwischen ihnen Konflikte auftreten. Konflikte werden ganz systematisch anhand einer Gewichtung der betreffenden Elemente aufgelöst. Dieser Vorgang läuft in vier Schritten ab.