Strukturpseudoklassen in CSS

Entwickler von Websites verlangten schon immer, dass man bestimmte Positionen aus der Dokumentenstruktur mit CSS ansprechen kann. Das kann man z.B. dafür nutzen, um jede 2. Tabellenzeile zu formatieren. Die Gruppe der Selektoren, mit denen solche Stilzuweisungen möglich sind, werden Strukturpseudoklassen genannt. Vor CSS3 gab es hierfür nur eine Möglichkeit (first-child). Ab CSS3 wurden diese jedoch erheblich erweitert. Nachfolgend sind diese aufgelistet.

First Child (1. Kindelement)

Ab CSS3

Last Child (Letztes Kindelement)
Only Child (Kindelement ohne Geschwisterelement)
First of Type (Das 1. Element vom selben Typ)
Last of Type (Das letzte Element vom selben Typ)
Only of Type (Ohne Geschwisterelement vom selben Typ)
N-th Child (N-te Kindelement)
N-th Last Child (N-te Kindelement rückwärts betrachtet)
N-th of Type (N-te Element vom selben Typ)
N-th Last of Type (N-te Element vom selben Typ rückwärts betrachtet)
Root (Wurzelelement)
Empty (Leeres Element)

Schreibweise

Wie die anderen Pseudoklassen werden Strukturpseudoklassen mit einem einfachen Doppelpunkt geschrieben. Außerdem können sie wie unter Kombinatoren beschrieben mit Einfachselektoren kombiniert werden.

First Child

Mit :first-child wird das 1. Kindelement angesprochen.

Mit dem folgenden Code formatiert man die TR-Tags, die das 1. Kindelement innerhalb der HTML-Struktur sind. Bei einer Tabelle würde das dafür sorgen, dass die erste Zeile formatiert werden würde.

tr:first-child { background: yellow; }

Möchte man das 1. Kindelement innerhalb des Elements ansprechen, das mit dem Einfachselektor angegeben wird, dann kann man das mit Kombinatoren erreichen. Beim folgenden Code werden die 1. Kindelemente innerhalb des TR-Tags angesprochen. Das würde dazu führen, dass die 1. Spalte (TD ist Kind von TR) formatiert werden würde.

tr :first-child  { background: yellow; }

Last Child

Mit :last-child wird das letzte Element angesprochen.

Mit dem folgenden Code wird der TR-Tag angesprochen, der das letzte Kindelement ist.

tr:last-child { background: yellow; }

Mit dem folgenden Code werden die letzten Kindelemente unterhalb des TR-Tags angesprochen. Das würde bei einer Tabelle dafür sorgen, dass die letzte Spalte formatiert werden würde.

tr :last-child { background: yellow; }

Only Child

Mit :only-child werden Kindelemente ohne Geschwisterelemente angesprochen.

Beim folgenden Code wird der STRONG-Tag nur formatiert, wenn es ein alleiniges Kindelement ist.

strong:only-child { background: yellow; }

Beim folgenden Code wird das Kindelement unterhalb des P-Tags nur dann angesprochen, wenn es ein alleiniges Kindelement ist.

p :only-child { background: yellow; }

First of Type

Beim :first-of-type wird das erste Element desselben Typs angesprochen.

Zwischen :first-child und :first-of-type sind zwar häufig keine Unterschiede erkennbar, da sie sich oft identisch verhalten. Es gibt jedoch Unterschiede. Angenommen, man hat den folgenden HTML-Code.

<div>
<h1>Überschrift</h1>
<p>Absatz 1</p>
<p>Absatz 2</p>
</div>

Beim :first-child wäre das 1. Kindelement unterhalb des DIV-Containers nur die Überschrift. Spricht man den Knoten jedoch mit :first-of-type an, dann kann man damit die Überschrift oder den 1. Absatz ansprechen. Denn, beide sind die ersten Kindelemente ihres Typs. Mit dem folgenden Code werden die ersten Absätze angesprochen.

p:first-of-type { background: yellow; }

Mit dem folgenden Code werden die 1. Elemente eines Typs unterhalb der DIV-Container angesprochen.

div :first-of-type { background: yellow; }

Last of Type

Beim :last-of-type wird das letzte Element desselben Typs angesprochen.

Mit dem folgenden Code werden die letzten Absätze angesprochen.

p:last-of-type { background: yellow; }

Mit dem folgenden Code werden die letzten Elemente eines Typs unterhalb der DIV-Container angesprochen.

div :last-of-type { background: yellow; }

Only of Type

Beim :only-of-type werden nur Elemente ohne Geschwisterelemente ihres Typs angesprochen.

Mit dem folgenden Code werden die Absätze angesprochen, wenn keine weiteren Absätze auf der Ebene vorhanden sind.

p:only-of-type { background: yellow; }

Mit dem folgenden Code werden nur die Elemente angesprochen, die unterhalb des DIV-Containers keine Geschwisterelemente desselben Typs haben.

div :only-of-type { background: yellow; }

N-th Child

Mit :nth-child() wird das "N-te" Element angesprochen. In runden Klammern wird die Zahl angegeben, um das "wievielte" Element anzugeben.

Mit dem folgenden Code werden die TD-Tags angesprochen, die das 4. Kindelement sind.

td:nth-child(4) { background: yellow; }

Mit dem folgenden Tag werden die 4. Kindelemente unterhalb der DIV-Container angesprochen.

div :nth-child(4) { background: yellow; }

N-th Last Child

Mit :nth-last-child() wird wie beim :nth-child() das "N-te" Element angesprochen. Der Unterschied besteht darin, dass die Reihenfolge umgekehrt wird (vom Ende zum Anfang).

Mit dem folgenden Code werden die vorletzten TD-Tags angesprochen, die Kindelemente sind.

td:nth-last-child(2) { background: yellow; }

Mit dem folgenden Tag werden die vorletzten Kindelemente unterhalb der DIV-Container angesprochen.

div :nth-last-child(2) { background: yellow; }

N-th of Type

Mit :nth-of-type() wird das "N-te" Element eines Typs auf einer Ebene angesprochen.

Mit dem folgenden Code werden die TD-Tags angesprochen, die die zweiten Elemente aus den TD-Tags sind.

td:nth-of-type(2) { background: yellow; }

Mit dem folgenden Code werden die 2. Elemente eines Typs unterhalb der DIV-Container angesprochen.

div :nth-of-type(2) { background: yellow; }

N-th Last of Type

Mit :nth-last-of-type() wird das "N-te" Element eines Typs auf einer Ebene angesprochen. Die Reihenfolge ist dabei rückwärts (vom Ende zum Anfang).

Mit dem folgenden Code werden die TD-Tags angesprochen, die die vorletzten Elemente aus den TD-Tags sind.

td:nth-last-of-type(2) { background: yellow; }

Mit dem folgenden Code werden die vorletzten Elemente eines Typs unterhalb der DIV-Container angesprochen.

div :nth-last-of-type(2) { background: yellow; }

Root

Mit :root wird das Wurzelelement eines Dokuments angesprochen. Auf Webseiten ist das das Element <html>.

Da auf Webseiten das Wurzelelement keine Eltern oder Geschwisterelemente besitzt, wird der Code in der Regel nicht mit einem anderen Einfachselektor verknüpft. Außerdem könnte man statt :root auch den Selektor html verwenden. Die folgenden beiden Codezeilen würden denselben Effekt haben.

:root { background: yellow; }

/* Derselbe Effekt */
html { background: yellow; }

Empty

Mit :empty werden Elemente angesprochen, die leer sind und keine Kindelemente haben. Das kann z.B. dafür genutzt werden, um in einer Tabelle die leeren Zellen farblich hervorzuheben.

Mit dem folgenden Code werden die TD-Tags angesprochen, die leer sind.

td:empty { background: yellow; }

Mit dem folgenden Code werden die leeren Elemente unterhalb der TR-Tags angesprochen.

tr :empty { background: yellow; }

Bei all den Beispielen kann man neben den Elementselektoren auch andere Einfachselektor-Typen verwenden.