http://jendryschik.de

Usability und Webstandards

Suche
SucheMenü

Selektoren

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

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

Tabelle 6.4: Universalselektor
Selektor Bezeichnung Bedeutung
* Universalselektor alle Elemente

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

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

Browserunterstützung

Der Universalselektor wird von allen modernen Browsern erkannt, mit folgender Besonderheit:

IE 6
Der Internet Explorer bis Version 6 entfernt alle führenden * eines Selektors, bevor er die passenden Elemente sucht. Im Ergebnis behandelt er * html daher genauso wie ein alleinstehendes html. Dieses Verhalten lässt sich für CSS-Hacks ausnutzen, siehe Kapitel 6.8.4.

Zum Seitenanfang

Typselektor

Tabelle 6.5: Typselektor
Selektor Bezeichnung Bedeutung
E Typselektor Element E

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; }

Browserunterstützung

Alle Browser
Der Typselektor wird von allen modernen Browsern erkannt.

Zum Seitenanfang

Klassen- und ID-Selektor

Tabelle 6.6: Klassen- und ID-Selektor
Selektor Bezeichnung Bedeutung
E.klasse Klassenselektor Element E der Klasse klasse
E#bezeichner ID-Selektor Element E mit der ID bezeichner

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; }

Browserunterstützung

Der Klassen- und der ID-Selektor werden von allen modernen Browsern erkannt, mit folgender Ausnahme:

IE 6
Der Internet Explorer für Windows bis Version 6 beachtet bei kombinierten Klassenselektoren nur den letzten. Er wendet die Regel aus Beispiel 6 auf alle Elemente an, die eine Klasse hinweis haben, auch wenn die Klasse fehler fehlt. Aktuellere Versionen des IE verhalten sich korrekt.

Zum Seitenanfang

Attributselektoren

Tabelle 6.7: Attributselektoren
Selektor Bezeichnung Bedeutung
E[foo] Attributselektor Element E mit Attribut foo
E[foo="bar"] Attributselektor Element E mit Attribut foo und Wert bar
E[foo~="bar"] Attributselektor Element E mit Attribut foo, dessen durch Leerzeichen getrennte Liste von Werten bar enthält (p[class~="bar"] entspricht p.bar)
E[foo|="bar"] Attributselektor Element E mit Attribut foo, dessen durch Trennstriche (-) getrennte Liste von Werten mit bar beginnt
E[foo^="bar"] Attributselektor Element E mit Attribut foo, dessen Wert mit bar beginnt
E[foo$="bar"] Attributselektor Element E mit Attribut foo, dessen Wert mit bar endet
E[foo*="bar"] Attributselektor Element E mit Attribut foo, das die Zeichenkette bar enthält

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.

Browserunterstützung

Aktuelle Versionen von Safari, Opera, Mozilla und iCab interpretieren zumindest die ersten beiden Attributselektoren und zum Teil auch alle weiteren.

IE 6
Der IE ist systemübergreifend bis zur Version 6 nicht in der Lage, den Attributselektor zu erkennen.

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 (:).

Tabelle 6.8: Link-Pseudoklassen
Selektor Bezeichnung Bedeutung
E:link Link-Pseudoklasse Element E, wenn E der Quellanker eines unbesuchten Hyperlinks ist (üblicherweise das Element a)
E:visited Link-Pseudoklasse Element E, wenn E der Quellanker eines besuchten Hyperlinks ist

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

Tabelle 6.9: Dynamische Pseudoklassen
Selektor Bezeichnung Bedeutung
E:hover dynamische Pseudoklasse Element E, wenn E mit dem (Maus-)Zeiger berührt wird
E:focus dynamische Pseudoklasse Element E, wenn E den Fokus hat
E:active dynamische Pseudoklasse Element E, wenn E aktiviert ist (beispielsweise der aktivierte Quellanker eines Hyperlinks)

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

Tabelle 6.10: Struktur-Pseudoklassen
Selektor Bezeichnung Bedeutung
E:first-child Struktur-Pseudoklasse Element E, das erstes Kind seines Elternelements ist
E:last-child Struktur-Pseudoklasse Element E, das letztes Kind seines Elternelements ist
E:first-of-type Struktur-Pseudoklasse erstes Element E, das Kind seines Elternelements ist
E:last-of-type Struktur-Pseudoklasse letztes Element E, das Kind seines Elternelements ist
E:only-child Struktur-Pseudoklasse Element E, das einziges Kind seines Elternelements ist
E:only-of-type Struktur-Pseudoklasse einziges Element E in einer Reihe von Geschwisterelementen
E:nth-child(n) Struktur-Pseudoklasse Element E, das von vorn gezählt n-tes Kind seines Elternelements ist (der Index beginnt bei 1)
E:nth-last-child(n) Struktur-Pseudoklasse Element E, das von hinten gezählt n-tes Kind seines Elternelements ist
E:nth-of-type(n) Struktur-Pseudoklasse von vorn gezählt n-tes Element E in einer Reihe von Geschwisterelementen
E:nth-last-of-type(n) Struktur-Pseudoklasse von hinten gezählt n-tes Element E in einer Reihe von Geschwisterelementen
E:empty Struktur-Pseudoklasse Element E ohne Nachfahren (auch keine Textknoten, also auch kein textueller Inhalt)
E:root Struktur-Pseudoklasse Wurzelelement E eines Dokuments (in (X)HTML-Dokumenten äquivalent zum Selektor html)

Ü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

Tabelle 6.11: Verweisziel-Pseudoklasse
Selektor Bezeichnung Bedeutung
E:target Verweisziel-Pseudoklasse Element E, das aktiver (aktuell angesprungener) Zielanker eines Hyperlinks ist

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

Tabelle 6.12: Sprach-Pseudoklasse
Selektor Bezeichnung Bedeutung
E:lang(x) Sprach-Pseudoklasse Element E der (natürlichen) Sprache x

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

Tabelle 6.13: Negations-Pseudoklasse
Selektor Bezeichnung Bedeutung
E:not(s) Negations-Pseudoklasse Element E, auf das der Selektor s nicht zutrifft

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.

Browserunterstützung

Kein Browser versteht derzeit jede der vorgestellten Pseudoklassen.

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.

Tabelle 6.14: Selektion des ersten Zeichens und der ersten Zeile eines Elements
Selektor Bezeichnung Bedeutung
E:first-letter Pseudoelement erstes Zeichen eines Element E
E:first-line Pseudoelement erste Zeile eines Elements E

: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äß.

Tabelle 6.15: Generierter Inhalt
Selektor Bezeichnung Bedeutung
E:before Pseudoelement generierter Inhalt vor Element E
E:after Pseudoelement generierter Inhalt nach Element E

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.

Tabelle 6.16: Elementfragment-Pseudoelement
Selektor Bezeichnung Bedeutung
E::selection Elementfragment-Pseudoelement Teil eines Elements E, der vom Nutzer markiert ist

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;
}

Browserunterstützung

Pseudoelemente werden im Allgemeinen von allen modernen Browsern erkannt. Das Elementfragment-Pseudoelement wird bisher nur von KHTML-Browsern (Konqueror und Safari) unterstützt.

Gecko
In vielen Gecko-Browsern lässt sich generierter Inhalt weder kopieren noch positionieren.

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.

Tabelle 6.17: Kombinatoren
Selektor 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

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; }

Browserunterstützung

Alle Browser
Die vorgestellten Kombinatoren werden von allen Browsern in ihren aktuellen Versionen erkannt.