template
Index :: CSS :: Selektoren
Für eine Zusammenfassung siehe auch Anhang :: CSS-Selektoren
In CSS legen Regeln für den Mustervergleich fest, welche Elemente im Dokumentbaum angesprochen werden. Diese Muster, die so genannten 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 so genannte 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 (>), das Plus (+) 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. Wird eine Folge einfacher Selektoren und entsprechende Kombinatoren vorangestellt, kommen zusätzliche Übereinstimmungsbeschränkungen hinzu. Man spricht dann von kontextabhängigen Selektoren. Auf diese Art und Weise können immer speziellere Teile des Dokumentbaums angesprochen werden.
Der Universalselektor * trifft auf alle Elemente zu und kann daher zumeist einfach weggelassen werden. Die beiden folgenden Regeln sind bedeutungsgleich:
* { margin: 0; }
{ margin: 0; }
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; }
Das Universalattribut class kann für fast alle Elemente vergeben werden und wird mit CSS über den Klassenselektor angesprochen, indem man den Klassennamen mit einem führenden Punkt ohne Leerzeichen direkt hinter den einfachen Selektor setzt. Die Regel
p.hinweis { margin: 0; }
spricht alle Elemente vom Typ p an, deren Attribut class den Wert 'hinweis' enthät, beispielsweise folgende:
<p class='hinweis'>Bitte füllen Sie alle mit einem Stern (*) 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; }
| Syntax | Bedeutung |
| E[attr] | Element E mit Attribut attr |
| E[attr="abc"] | Element E mit Attribut attr und Wert abc |
| E[attr~="abc"] | Element E mit Attribut attr, dessen durch Leerzeichen getrennte Liste von Werten abc enthält (p[class~="bar"] entspricht p.abc) |
| E[attr|="abc"] | Element E mit Attribut attr, dessen durch Trennstriche (-) getrennte Liste von Werten mit abc beginnt |
| E[attr^="abc"] | Element E mit Attribut attr, dessen Wert mit abc beginnt |
| E[attr$="abc"] | Element E mit Attribut attr, dessen Wert mit abc endet |
| E[attr*="abc"] | Element E mit Attribut attr, das die Zeichenkette abc enthält |
Seit CSS 2 lassen sich Elemente mithilfe der ersten vier Attributselektoren auch über ihre Attribute ansprechen.
CSS 3 komplettiert die Liste mit drei weiteren 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 Attibut 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.
Mit Pseudoklassen können Webautoren Elemente anhand von Informationen auswählen, die entweder ausserhalb der Dokumentstruktur liegen oder mit anderen Selektoren nicht ausgedrückt werden können. Die Notation beginnt immer mit genau einem Doppelpunkt (:).
| Syntax | Bedeutung |
| E:link | Element E, wenn E der Quellanker eines unbesuchten Hyperlinks ist (üblicherweise das Element a) |
| E:visited | Element E, wenn E der Quellanker eines besuchten Hyperlinks ist |
Die beiden Link-Pseudoklassen :link und :visited treten ein, wenn der Zielanker eines Hyperlinks unbesucht oder besucht ist. Eine Ausnahme bildet der Internet Explorer Windows, der seiteninterne Links grundsätzlich nur als besucht, also als :visited, kennzeichnet, unabhängig davon, ob sie tatsächlich schon angeklickt wurden.
| Syntax | Bedeutung |
| E:hover | Element E, wenn E mit dem (Maus-)Zeiger berührt wird |
| E:active | Element E, wenn E aktiviert ist (beispielsweise der aktivierte Quellanker eines Hyperlinks) |
| E:focus | Element E, wenn E den Fokus hat |
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 woanders hinsehen, um etwas nachzuschlagen.
Über Struktur-Pseudoklassen lassen sich Elemente anhand ihrer Position in der Dokumentstruktur ansprechen.
| Syntax | Bedeutung |
| E:first-child | Element E, das erstes Kind seines Elternelements ist |
| E:last-child | Element E, das letztes Kind seines Elternelements ist |
| E:first-of-type | erstes Element E, das Kind seines Elternelements ist |
| E:last-of-type | letztes Element E, das Kind seines Elternelements ist |
| E:only-child | Element E, das einziges Kind seines Elternelements ist |
| E:only-of-type | einziges Element E in einer Reihe von Geschwisterelementen |
| E:nth-child(n) | Element E, das n-tes Kind seines Elternelements ist |
| E:nth-last-child(n) | Element E, das von hinten gezählt n-tes Kind seines Elternelements ist |
| E:nth-of-type(n) | n-tes Element E in einer Reihe von Geschwisterelementen |
| E:nth-last-of-type(n) | von hinten gezählt n-tes Element E in einer Reihe von Geschwisterelementen |
| E:empty | Element E ohne Nachfahren (auch keine Textknoten, also auch kein textueller Inhalt) |
| E:root | Wurzelelement E eines Dokuments (in (X)HTML-Dokumenten äquivalent zu html) |
:first-child gibt es schon in CSS 2 und spricht ein Element an, wenn es das erste Kind seines Elternelements ist. Mit Ausnahme des Internet Explorers für Windows können alle aktuellen Browser diese Pseudoklasse verstehen.
Alle anderen Struktur-Pseudoklassen sind Bestandteil von CSS 3 und werden leider bisher kaum unterstützt. Sie werden hier hauptsächlich deshalb aufgeführt, weil sie so interessante Möglichkeiten bieten und über kurz oder lang sicherlich auch eine bessere Browserunterstützung erfahren werden.
:nth-child(n) beispielsweise 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önnte man 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; }
Leider wird dies noch eine ganze Weile dauern. Aber es kann nicht schaden, sein Stylesheet bereits heute entsprechend aufzubereiten, um sich irgendwann über die Darstellung in dem einen oder anderen aktuellen Browser zu freuen.
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 zumindest von aktuellen KHTML- und Gecko-Browsern.
h2:target { border:2px solid #003359; }
Wenn man die natürliche Sprache eines Elements mit dem Attribut lang gekennzeichnet hat, kann dieses und seine Nachfahren über die Sprach-Pseudoklasse gesondert angesprochen werden.
Die 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; }
Mit der Negations-Pseudoklasse :not() können Webautoren Elemente auswählen, auf die ein bestimmter Selektor nicht zutrifft. Diese Elemente werden mit einfachen Selektoren innerhalb der Klammern angegeben.
Hier werden alle Elemente ausgewählt, die nicht das erste Kind sind:
:not(:first-child) { font-size:.9em; }
Auch für diesen Selektor ist die Unterstützung bisher sehr schmal. Zumindest aktuelle KHTML- und Gecko-Browser können etwas damit anfangen.
In XML existiert das Konzept der Namensräume, das es erlaubt, Elemente gleichen Namens aus unterschiedlichen Namensräumen innerhalb eines Dokuments zu verwenden. Über den Namensraumselektor können Webautoren Elemente eines bestimmten Namensraums ansprechen.
Folgende Regel wird auf ein (XML-)Element 'title' aus dem Namensraum 'book' angewendet, beispielsweise <book:title>Krieg und Frieden</book:title>:
book|title { font-weight:bold; }
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 wird schon weitreichend unterstützt und hilft, sie von den Pseudo-Klassen zu unterscheiden.
| Syntax | Bedeutung |
E:first-letter
E::first-letter | erstes Zeichen eines Elements E |
E:first-line
E::first-line | erste Zeile eines Elements E |
E:before
E::before | generierter Inhalt vor Element E |
E:after
E::after | generierter Inhalt nach Element E |
E:selection
E::selection | Teil eines Elements E, der vom Nutzer markiert ist |
::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: Listenmarker 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 (bzw. 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 Elementes 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, um Inhalt vor und/oder nach dem tatsächlichen Inhalt zu generieren. So kann man in Browsern, welche den Selektor verstehen, sehr einfach die über das Attribut 'cite' angegebene Quelle eines Zitats anzeigen:
<blockquote cite='http://www.blabla.de/texte/doc03.htm'>
<p>Dies ist ein Zitat aus einem Abschnitt des Textes eines Dokuments.</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: " att(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"; }
Links, die zu Dokumenten der gleichen Domain führen, sind als relative Verweise notiert, entweder relativ zum Dokument oder relativ zum Document Root. Wer sich daran hält und absolute Verweise nur für Links nach aussen verwendet, der kann 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 Nord-Ost-Pfeil 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 mögen Fälle sein, in denen das Farbschema der Seite sehr wahrscheinlich keinen guten Kontrast mehr zu den üblichen Farbmarkierungen bietet, etwa Weiss auf Blau.
p::selection { color:black; background-color:yellow; }
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.
| Syntax | Bezeichnung | Bedeutung |
| F E | Nachfahrkombinator | Element E, das Nachfahre eines Elements vom Typ F ist |
| F > E | Kindkombinator | Element E, das Kind eines Elements vom Typ F ist |
| F + E | direkter Nachbarkombinator | Element E, das unmittelbar einem Geschwisterelement vom Typ F folgt |
| F ~ E | indirekter Nachbarkombinator | Element E, das einem Geschwisterelement vom Typ F folgt |
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.
Der Kindkombinator wählt nur Kindelemente aus:
html > * { margin: 0; } /* Äquivalent zum Selektor 'body, head' */
Über den direkten Nachbarselektor ist es möglich, ein Element anzusprechen, das unmittelbar einem anderen auf gleicher Ebene folgt, beispielweise:
<h2>Überschrift</h2>
<p>Erster Absatz</p>
<p>Zweiter Absatz</p>
Den ersten Absatz nach der Überschrift könnte man über folgende Regel formatieren:
h2 + p { margin-top: 0; }
Der indirekte Nachbarselektor spricht alle Elemente auf der gleichen Ebene wie ein vorausgegangenes Element an, auch wenn sie nicht unmittelbar folgen.
Die folgende Regel wird auf alle Absätze des oben angeführten Beispiels angewandt:
h2 ~ p { margin: 0; }
| template |
 |