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 |