Workshop Internet-Präsenz

Referenz Cascading Style Sheet

Pseudo-Klassen und -Elemente

Mit Selektoren bzw. Kombinatoren ist es nur möglich, sich auf Elemente (HTML-Tags bzw. XML-Tags) im allgemeinen oder Hierarchien von Elementen zu beziehen. Für Spezifikationen über diesen Rahmen (Dokumentbaum bzw. Dokumentsprache [HTML, XML]) hinaus ermöglichen Pseudo-Klassen und -Elemente weitergehende Spezifikationen. Zum Beispiel erlaubt keine Dokumentsprache eine Spezifikation des Aussehens der ersten Zeile oder des ersten Buchstabens eines Absatzes oder zur Laufzeit generierte Inhalte einzufügen.

Pseudo-Klassen erlauben die Definition von Style Sheets für verschiedene Elementtypen, die sich durch Interaktion mit dem Dokument ergeben oder nicht aus dem Dokumentbaum erschlossen werden können.

Pseudo-Elemente erlauben die Definition von Style Sheets für Elementteile, auf die über die Dokumentsprache nicht zugegriffen werden kann. Dies betrifft z.B. den ersten Buchstaben oder die erste Zeile eines Absatzes.

Bei den Bezeichnern von Pseudo-Klassen und -Elementen wird nicht zwischen Groß- und Kleinschreibung unterschieden. Pseudo-Elemente müssen nach dem Element-Bezeichner notiert werden, dies ist bei Pseudo-Klassen nicht notwendig.

Pseudo-Klassen

Klasse Erläuterung CSS Level
Pseudoklasse Link:
a:link
a:visited
Repräsentiert einen noch nicht aufgesuchten bzw. einen bereits aufgesuchten Link.
 
a:link { color: red }
a:visited { color: blue }
CSS 1
Dynamische Pseudoklassen:
E:active
Repräsentiert des Element E im aktivierten Zustand, d.h., der Anwender klickt das Element an und hält die Maustaste gedrückt. CSS 1
E:hover Repräsentiert des Element E in einem Zustand, in dem das Element mit der Maus überfahren, aber nicht angeklickt wird. CSS 2
E:focus Repräsentiert des Element E in einem Zustand, in dem es den Fokus besitzt. CSS 2
Pseudoklasse language:
E:lang()
Repräsentiert des Element E, das Text einer bestimmten Sprache enthält.
 
Beispiel: Wahl unterschiedlicher typographischer Anführungszeichen.
CSS 2
Pseudoklasse Target:
:target
Ziel-Element der diesbezüglichen URI. CSS 3
Pseudoklasse Negation:
:not()
Element, das nicht durch das Argument repräsentiert wird.
 
a:not(:visited).
CSS 3
Pseudoklassen Nutzerinterface (z.B. Formulare):
:enabled
Zustand, in dem Element freigegeben ist. CSS 3
:disabled Zustand, in dem Element nicht freigegeben ist. CSS 3
:checked Zustand, in dem Element ausgewählt ist. CSS 3
:indeterminate Element, dessen Zustand unbestimmt ist. CSS 3
Strukturelle Pseudoklassen:
:root
Dokument-Wurzel. Im HTML ist dies das HTML-Element, in XML ist dies die zugehörige DTD, das Schema oder der Namenraum des XML-Dokuments. CSS 3
:nth-child(an+b) Element ist das jeweils b. Kindelement der Gruppen, die aus a Kindelementen bestehen. Mögliche Werte sind auch "odd" und "even". Ist a Null oder wird es weggelassen, so gibt es nur eine Gruppe. Die diesbezüglichen Kindelemente sind unterschiedlich, aber in derselben Hierarchieebene.
 
p:nth-child(2n+1) = p:nth-child(odd)
CSS 3
:first-child Erstes Kindelement. :first-child ist identisch zu :nth-child(1). CSS 2
:nth-last-child(an+b) Element ist das jeweils b. Kindelement der Gruppen, die aus a Kindelementen bestehen, vom Hierarchieende aus gesehen. Mögliche Werte sind auch "odd" und "even". Ist a Null oder wird es weggelassen, so gibt es nur eine Gruppe. Die diesbezüglichen Kindelemente sind unterschiedlich, aber in derselben Hierarchieebene.
 
p:nth-last-child(2n+1) = p:nth-last-child(odd)
CSS 3
:last-child Letztes Kindelement. :last-child ist identisch zu :nth-last-child(1). CSS 3
:nth-of-type(an+b) Element ist das jeweils b. Kindelement der Gruppen aus gleichartigen Kindelementen derselben Hierarchieebene, die aus a Elementen bestehen. Mögliche Werte sind auch "odd" und "even". Ist a Null oder wird es weggelassen, so gibt es nur eine Gruppe. CSS 3
:first-of-type Erstes Element desselben Typs. :first-of-type ist identisch zu :nth-of-type(1). CSS 3
:nth-last-of-type(an+b) Element ist das jeweils b. Kindelement der Gruppen aus gleichartigen Kindelementen derselben Hierarchieebene, die aus a Elementen bestehen, vom Ende der Hierarchieebene aus gesehen. Mögliche Werte sind auch "odd" und "even". Ist a Null oder wird es weggelassen, so gibt es nur eine Gruppe. CSS 3
:last-of-type Letztes Element desselben Typs. :last-of-type ist identisch zu :nth-last-of-type(1). CSS 3
:first-node Erstes Knotenelement. Mozilla Erweiterung
:last-node Letztes Knotenelement. Mozilla Erweiterung
:only-child Element, das kein gleichrangiges Element (Sibling, Bruder bzw. Schwester) besitzt. CSS 3
:only-of-type Element, das kein gleichrangiges Element desselben Typs (Sibling, Bruder bzw. Schwester) besitzt. CSS 3
:empty Element, das kein Kindelement besitzt. CSS 3
Pseudoklasse Content:
:contains("substring")
Element, dessen Textinhalt die vorgegebene Zeichenkette "substring" enthält. CSS 3

Pseudo-Elemente

Pseudo-Elemente sind am doppelten Doppelpunkt erkennbar. Die Angaben müssen aber auch bedient werden, wenn nur ein einfacher Doppelpunkt geschrieben wird. Da "::" erst mit CSS 3 eingeführt wurde, geht man sicher, wenn nur ":" angegeben wird.

Element Erläuterung CSS Level
::first-line Betrifft die Formatierung der ersten Textzeile eines Elements. CSS 1
::first-letter Betrifft die Formatierung des ersten Buchstabens eines Elements. CSS 1
::before Text, der dem im Dokument angegebenen Element-Text vorangestellt wird. Dieser Text kann Inhalte enthalten, die erst zur Laufzeit generiert werden, z.B. Abschnitts- oder Gliederungsnummerierung. CSS 2
::after Text, der dem im Dokument angegebenen Element-Text nachgestellt wird. Dieser Text kann Inhalte enthalten, die erst zur Laufzeit generiert werden, z.B. Abschnitts- oder Gliederungsnummerierung. CSS 2
::selection Betrifft die Formatierung des ausgewählten Elements. Kann zusammen verwendet werden mit :checked. CSS 3