In CSS legen Regeln für den Mustervergleich fest, welche Elemente im Dokumentbaum angesprochen werden. Diese Muster, die sogenannten Selektoren, können von einfachen Elementnamen bis hin zu umfassenden Kontextmustern reichen. Wenn alle Bedingungen eines Musters für ein bestimmtes Element zutreffen, stimmt der Selektor mit dem Element überein, und die Regeln können auf das Element angewandt werden.

Auf syntaktischer Ebene ist ein Selektor eine Folge einfacher Selektoren, die durch sogenannte Kombinatoren getrennt werden.

Ein einfacher Selektor ist entweder ein Typselektor, der Universalselektor, ein Attributselektor, ein Klassenselektor, ein ID-Selektor, ein Namensraumselektor oder eine Pseudoklasse. Ein Pseudoelement kann an den letzten einfachen Selektor in einer Kette angehängt werden.

Kombinatoren sind Leerraum, das Größer-als-Zeichen (>), das Pluszeichen (+) und die Tilde (~). Leerraum darf nur aus Spatium (Leerzeichen, space), Tabulator (tab), Zeilenvorschub (line feed) und Wagenrücklauf (carriage return) bestehen.

Ein Selektor, der aus einem einzigen einfachen Selektor besteht, stimmt mit jedem beliebigen Element überein, das seine Anforderungen erfüllt. Werden eine Folge einfacher Selektoren und entsprechende Kombinatoren vorangestellt, kommen zusätzliche Übereinstimmungsbeschränkungen hinzu. Man spricht dann von Kontextselektoren. Auf diese Art und Weise können immer speziellere Teile des Dokumentbaums angesprochen werden.

In den nächsten Abschnitten führe ich viele (einfache) Selektoren und Kombinatoren auf und erläutere ihre Bedeutung. Ich erkläre, welche Elemente im Dokumentbaum der Selektor anspricht. Die Tabellen enthalten Selektoren aus CSS 1 bis CSS 3, die ich zur besseren Übersicht thematisch, nicht chronologisch, sortiert habe. Verstehen Sie die verwendeten Elementnamen E und F, den Attributnamen foo sowie den Attributwert bar als Variablen (Platzhalter) für tatsächliche Elementtypen und Attribute.

Zum Verständnis der Bedeutungen ist es wichtig, dass Sie sich folgende Begriffe innerhalb des Dokumentbaums noch einmal in Erinnerung rufen: »Vorfahrenelement«, »Nachfahrenelement«, »Elternelement«, »Kindelement« und »Geschwisterelement« (vgl. Kapitel 4.3).

Die Liste der möglichen Selektoren in CSS 3 ist zu lang, um sie hier ausführlich zu behandeln. Deshalb beschränke ich mich auf jene, die bereits eine nennenswerte Unterstützung in aktuellen Browsern erfahren.

Zum Seitenanfang

Universalselektor

Der Universalselektor trifft auf alle Elemente zu und kann daher zumeist einfach weggelassen werden. Die beiden folgenden Regeln sind bedeutungsgleich.

* { margin: 0; }
    
{ margin: 0; }

Zum Seitenanfang

Typselektor

Der Typselektor spricht Elemente anhand des Elementnamens an. Die Regel wird auf alle Elemente des entsprechenden Typs angewandt, egal an welcher Stelle des Dokuments sie notiert sind und welcher Klasse sie angehören oder welchen Bezeichner sie tragen.

p { margin: 0; }

Zum Seitenanfang

Klassen- und ID-Selektor

Das Universalattribut class können Sie für fast alle Elemente vergeben (siehe Kapitel 4.6). Sie sprechen es mit CSS über den Klassenselektor an, indem Sie den Klassennamen mit einem führenden Punkt ohne Leerzeichen direkt hinter den einfachen Selektor setzten. Die Regel

p.hinweis { margin: 0; }

spricht alle Elemente vom Typ p an, deren Attribut class den Wert hinweis enthält, beispielsweise folgende:

<p class="hinweis">Bitte füllen Sie alle mit einem
  Asterisk (*) markierten Felder aus.</p>

<p class="fehler hinweis">Es ist ein Fehler aufgetreten.<p>

Der Selektor .hinweis spricht alle Elemente der Klasse hinweis an, egal welchen Typs, und ist äquivalent zu *.hinweis.

Der folgende kombinierte Klassenselektor spricht Elemente an, die sowohl zur Klasse fehler als auch zur Klasse hinweis gehören:

.fehler.hinweis { margin: 0; }

Das Universalattribut id hat in XHTML-Dokumenten eine besondere Bedeutung, weil sein Wert pro Dokument nur ein Mal auftreten darf und Elemente mit diesem Attribut als Zielanker eines Links dienen können. Aus der zweiten Eigenschaft ergibt sich auch die Notation des ID-Selektors in CSS: Es wird eine Raute (#) vorangestellt:

ul#navigation { margin: 0; }

Zum Seitenanfang

Attributselektoren

Seit CSS 2 können Webautoren mithilfe der ersten vier Attributselektoren aus Tabelle 6.7 Elemente auch über ihre Attribute ansprechen. CSS 3 komplettiert die Liste mit den drei übrigen Attributselektoren. Der Link

<a href="http://example.com/" lang="de-DE" xml:lang="de-DE"
  title="Ein Link!">Beispiel</a>

kann unter anderem über folgende Attributselektoren angesprochen werden:

• a[href]: Das Element hat ein Attribut href.
• a[href="http://example.com/"]: Das Element hat ein Attribut href mit dem Wert http://example.com/.
• a[title~="Ein"]: Das Element hat ein Attribut title, in dem der Ausdruck »Ein« vorkommt. Dieser Ausdruck muss von weiteren durch mindestens ein Leerzeichen getrennt sein oder allein stehen – das ist hier der Fall.
• a[lang|="de"]: Das Element hat ein Attribut lang, dessen Wert mit »de-« beginnt.
• a[href^="http"]: Das Element hat ein Attribut href, das mit der Zeichenkette »http« beginnt.
• a[title$="!"]: Das Element hat ein Attribut title, das mit der Zeichenkette »!« endet.
• a[href*="example"]: Das Element hat ein Attribut href, dessen Wert die Zeichenkette »example« enthält.

Zum Seitenanfang

Pseudoklassen

Mit Pseudoklassen können Webautoren Elemente anhand von Informationen auswählen, die entweder außerhalb der Dokumentstruktur liegen oder mit anderen Selektoren nicht ausgedrückt werden können. Die Notation beginnt immer mit genau einem Doppelpunkt (:).

Link-Pseudoklassen

Die beiden Linkzustände :link und :visited treten ein, wenn der Zielanker eines Hyperlinks unbesucht oder besucht ist. Eine Ausnahme bildet der Internet Explorer bis Version 6, der seiteninterne Links grundsätzlich als besucht, also als :visited, kennzeichnet, unabhängig davon, ob sie tatsächlich schon angeklickt wurden.

Dynamische Pseudoklassen

Dynamische Pseudoklassen werden von alten Browsern nur für Links unterstützt; moderne Browser wenden sie aber grundsätzlich auf jedes Element an.

Besonders :focus wird immer häufiger zum Gestalten von Formularen eingesetzt. Mit

input[type="text"]:focus,
textarea:focus {
  color: black;
  background-color: #FFFF80;
}

können Webautoren das gerade fokussierte Texteingabefeld gelb hinterlegen, also das Feld, in das der Nutzer gerade schreiben kann. Besonders nützlich ist dies bei längeren Formularen, bei denen Besucher zwischendurch vielleicht kurz abgelenkt sind, um beispielsweise etwas nachzuschlagen.

Der Internet Explorer unterstützt bis Version 6 schon :active, wenn ein Link erst den Fokus hat. :focus selbst versteht er nicht.

Es ist sehr wichtig, dass Sie bei der Deklaration der Link- und dynamischen Pseudoklassen für Anker unbedingt die Reihenfolge :link, :visited, :hover, :focus, :active einhalten. Der Zielanker eines Links ist entweder noch nicht besucht worden (:link), oder er wurde bereits besucht (:visited) – beide Zustände schließen sich gegenseitig aus. Zusätzlich kann der Link mit dem Mauszeiger berührt werden (:hover) oder den Fokus haben (:focus). Zudem kann er aktiviert sein (:active). Wenn Sie beispielsweise a:hover vor a:visited aufführen, überschreiben (siehe Kapitel 6.7 »Die Kaskade«) die Deklarationen für a:visited die Deklarationen derselben Eigenschaften für a:hover; die Benutzerinteraktion ist somit nicht zu sehen. Aus demselben Grund sollte a:active stets nach a:hover und a:focus deklariert werden.

Struktur-Pseudoklassen

Über Struktur-Pseudoklassen können Webautoren Elemente anhand ihrer Position in der Dokumentstruktur ansprechen. :first-child gibt es schon in CSS 2, es spricht ein Element an, wenn es das erste Kind seines Elternelements ist.

Mit Ausnahme des Internet Explorers können alle aktuellen Browser diese Pseudoklasse verstehen. Alle anderen Struktur-Pseudoklassen sind Bestandteil von CSS 3 und werden bislang nur vereinzelt unterstützt. Ich führe sie an dieser Stelle hauptsächlich deshalb auf, weil sie so interessante Möglichkeiten bieten und über kurz oder lang sicherlich auch eine bessere Browserunterstützung erfahren werden.

:nth-child(n) ist eine Art mathematischer Selektor: Wenn man das n durch einen Zähler ersetzt, kann man alle Kinder an ungerader (E:nth-child(2n+1)) beziehungsweise gerader (E:nth-child(2n)) Position herausfinden – die Schlüsselwörter odd und even leisten dasselbe. Endlich könnten Webautoren auf einfache Weise Tabellenzeilen unterschiedlich einfärben:

/* Zeilen mit ungerader Nummer */
tr:nth-child(odd) {
  color: black;
  background-color: white;
}
/* Zeilen mit gerader Nummer */
tr:nth-child(even) {
  color: black;
  background-color: #ddd;
}

Es kann nicht schaden, sein Stylesheet bereits heute entsprechend aufzubereiten, um sich irgendwann über die zunehmende Anzahl von Browsern zu freuen, die den gewünschten Effekt anzeigen können.

Verweisziel-Pseudoklasse

Die Verweisziel-Pseudoklasse :target wird auf Elemente angewandt, die das Ziel eines angesprungenen Hyperlinks sind. Besonders nützlich ist dies, wenn das Linkziel am Ende eines Dokuments liegt und durch die Position allein nicht sofort klar wird, was gerade angesprungen wurde. Unterstützt wird dieser Selektor bislang nur von aktuellen KHTML- und Gecko-Browsern.

h2:target { border: 2px solid #003359; }

Sprach-Pseudoklasse

Wenn Sie die natürliche Sprache eines Elements mit dem Attribut lang gekennzeichnet haben, können Sie dieses und seine Nachfahren über die Sprach-Pseudoklasse gesondert ansprechen.

Folgende Regel stellt alle Elemente mit kursiver Schrift dar, die mit lang="en" gekennzeichnet wurden oder solch eine Auszeichnung erben.

:lang(en) { font-style: italic; }

Negations-Pseudoklasse

Mit der Negations-Pseudoklasse :not() können Sie Elemente auswählen, auf die ein bestimmter Selektor nicht zutrifft. Diese Elemente werden mit einfachen Selektoren innerhalb der Klammern angegeben:

/* Wählt alle Elemente aus, die nicht das erste Kind sind. */
:not(:first-child) { font-size: .9em; }

Auch für diesen Selektor ist die Unterstützung bisher sehr schmal: Nur aktuelle KHTML- und Gecko-Browser können etwas damit anfangen.

Zum Seitenanfang

Pseudoelemente

Pseudoelemente stehen nicht im Quelltext eines Dokuments, werden von CSS aber so behandelt, als stünden sie darin. Ihre Namen beginnen in CSS 2 analog zu Pseudoklassen mit einem Doppelpunkt (:), in CSS 3 mit zwei Doppelpunkten (::). Die neuere Notation hilft, Pseudoelemente von Pseudoklassen zu unterscheiden. Leider verstehen noch nicht alle aktuellen Browser die Schreibweise mit zwei Doppelpunkten. Sie sollten Pseudoelemente daher weiterhin mit nur einem Doppelpunkt notieren.

:first-letter und :first-line gibt es schon seit CSS 1, und nahezu jeder Browser kann sie interpretieren, wenngleich unterschiedlich gut. Gerade :first-letter wirft einige Fragen auf. Führende Interpunktionszeichen werden im Allgemeinen mit dem ersten Buchstaben gemeinsam als eine Box behandelt. Für einige Fälle ist es allerdings unklar, schwer zu implementieren oder undefiniert, wo genau der erste Buchstabe zu suchen ist: Listenelementmarkierungen etwa für eine geordnete Liste (ol) können wahl- und teilweise dieser erste Buchstabe sein oder eben nicht. Führende Klammern, Ligaturen und Bilder (beziehungsweise deren Alternativtext) verursachen oft Probleme. Webautoren müssen die Inhalte daher sehr genau kennen, ehe sie :first-letter einsetzen können.

Werden sowohl :first-line als auch :first-letter eines Elements angesprochen, überschreibt :first-letter die Eigenschaften für :first-line erwartungsgemäß.

Die Pseudoelemente :before und :after sprechen keinen bestehenden Inhalt an, sondern erzeugen welchen. Sie werden in den meisten Fällen im Zusammenhang mit der Eigenschaft content verwendet (siehe Kapitel 7.12.1), um Inhalt vor und/oder nach dem tatsächlichen Inhalt zu generieren. So kann man in Browsern, die den Selektor verstehen, sehr einfach die über das Attribut cite angegebene Quelle eines Zitats anzeigen:

<blockquote
  cite="http://gutenberg.spiegel.de/knigge/umgang/umg3a01.htm">
  <p>Man soll es also dem Schriftsteller nicht übel ausdeuten,
    wenn er, verführt von ein wenig Geschwätzigkeit, von der
    Begierde, über irgendeine Materie allerlei Arten von
    Menschen seine Gedanken mitzuteilen, etwas drucken lässt,
    das nicht grade die Quintessenz von Weisheit, Witz,
    Scharfsinn und Gelehrsamkeit enthält.</p>
</blockquote>

Folgende Regel sorgt nun dafür, dass ein ausreichend CSS 2-fähiger Browser im Anschluss an das Zitat die Quelle anzeigt:

blockquote:after {
  content: "(Quelle: " attr(cite) ")";
}

In Verbindung mit einem der CSS 3-Attributselektoren lassen sich externe Links besonders einfach kennzeichnen:

a[href^="http://"]:before,
a[href^="https://"]:before {
  content: "\2197\00A0";
}

Abb. 6.3: Das Pseudoelement :before können Sie einsetzen, um Pfeile vor externen Links darzustellen

Links, die zu Dokumenten der gleichen Domain führen, sind als relative Verweise notiert, entweder relativ zum Dokument oder relativ zum Document Root. Wenn Sie sich daran halten und absolute Verweise nur für Links nach außen verwenden, können Sie ausnutzen, dass der Wert des href-Attributs externer Links stets mit »http://« oder »https://« beginnt. Alle Browser, die den CSS 3-Attributselektor schon implementiert haben und zudem das Pseudoelement :before verstehen, zeigen vor externen Links einen Nordostpfeil an – ein für diesen Zweck in unterschiedlichen Varianten gern verwendetes Symbol.

Mit dem Elementfragment-Pseudoelement ::selection wird der gerade vom Nutzer markierte Text ausgewählt. Ein sinnvoller Einsatz mag dann entstehen, wenn das Farbschema der Seite sehr wahrscheinlich keinen guten Kontrast mehr zu den üblichen Farbmarkierungen bietet, etwa Weiß auf Blau.

p:selection {
  color: black;
  background-color: yellow;
}

Zum Seitenanfang

Kombinatoren

Oft genügen einfache Selektoren nicht zur richtigen Auswahl. Abhilfe schaffen Kombinatoren, die dabei helfen, zusätzliche Übereinstimmungsbeschränkungen zu formulieren, um nur spezielle Elemente zu erfassen.

Kombinatoren dürfen nicht innerhalb der Negations-Pseudoklasse :not() verwendet werden.

Nachfahrkombinator

Der einfachste Kombinator ist der Nachfahrkombinator. Er ist Teil von CSS 1, besteht aus mindestens einem Leerzeichen und wählt alle Elemente aus, die irgendwo innerhalb eines anderen stehen. Die Regel

li p { margin: 0; }

formatiert alle Absätze innerhalb eines Listenpunkts.

Kindkombinator

Der Kindkombinator wählt nur Kindelemente aus.

/* Äquivalent zum Selektor 'body, head' */
html > * { margin: 0; }

Direkter Nachbarkombinator

Über den direkten Nachbarselektor ist es möglich, ein Element anzusprechen, das unmittelbar einem anderen auf gleicher Ebene folgt. Betrachten Sie folgendes XHTML-Beispiel:

<h2>Überschrift</h2>
    
<p>Erster Absatz</p>

<p>Zweiter Absatz</p>

Den ersten Absatz nach der Überschrift können Webautoren über folgende Regel formatieren:

h2 + p { margin-top: 0; }

Indirekter Nachbarkombinator

Der indirekte Nachbarselektor spricht alle Elemente auf der gleichen Ebene wie ein vorausgegangenes Element an, auch wenn sie nicht unmittelbar folgen.

Folgende Regel wird auf alle Absätze des oben angeführten XHTML-Beispiels angewandt.

h2 ~ p { margin: 0; }