Schnellreferenz · CSS 2.1
Schnellreferenz Selektoren, Pseudoklassen, Pseudoelemente
Alle Eigenschaften des Kapitels in Tabellenform: mögliche Werte, Ausgangswert, Vererbung, Anwendbarkeit, Bezugswert für Prozentangaben und Mediengruppe – und die Browser-Unterstützung mit ihren Einschränkungen.
Erstveröffentlichung Vollreferenz alle Eigenschaften
Was in diesem Kapitel steht
Dieses Kapitel weicht von den übrigen ab: Es listet keine Eigenschaften, sondern die Selektoren, Pseudoklassen und Pseudoelemente von CSS 2.1 mit ihrer Schreibweise und ihrer Bedeutung. Spalten wie Ausgangswert oder Vererbung gibt es hier nicht, denn ein Selektor hat keinen Wert – er wählt aus.
Der Bestand ist überschaubar und bis heute die Grundlage: die fünf einfachen Selektoren für Typ, Universum, Attribut, Klasse und Kennung, die drei Kombinatoren, sieben Pseudoklassen und vier Pseudoelemente. Alles, was danach kam – strukturelle Pseudoklassen, Teilstring-Vergleiche in Attributen, die logischen Pseudoklassen –, steht in einem eigenen Modul und ist unter Selektoren ab Level 3 beschrieben.
Browser-Unterstützung
| Eigenschaft | Browser-Support |
|---|---|
| Attributselektor (attribute) |
|
| ID-Selektor (id) |
|
| Kindselektor (child) |
|
| Klassenselektor (class) |
|
| Geschwister- Selektor (adjacent sibling) |
|
| Nachfahrenselektor (descendant) |
|
| Typselektor (element/type) |
|
| Universalselektor (universal) |
|
Eigenschaft | Browser-Support |
| Dynamische Pseudoklassen :active, :focus, :hover |
|
| Link-Pseudoklassen :link, :visited |
|
| Strukturelle Pseudoklasse :first-child |
|
| Sprach-Pseudoklasse :lang(n) |
|
| Druck-Pseudoklassen :first, :left, :right |
|
Eigenschaft | Browser-Support |
| :before, :after |
|
| :first-letter |
|
| :first-line |
Das Pseudo-Element
|
Schnellreferenz-Tabelle
Cascading Style Sheets ::Schnellreferenz
CSS 1 & CSS 2: Selektoren
Die Stylesheet-Schnellreferenz kann auch als PDF-Datei herunter geladen werden.
| Selektor | CSS-Syntax | Bedeutung und Anwendbarkeit | |
|---|---|---|---|
| Selektor | CSS-Syntax | Bedeutung und Anwendbarkeit | |
Hinweis 1: |
|||
Selektoren | |||
E1, E2, E3 { ... } |
Für Elemente E1, E2 und E3 gilt dieselbe Deklaration. |
||
* { ... } |
Gilt für alle Elemente. Das Zeichen * kann auch weggelassen werden. |
||
E1 { ... } |
Gilt nur für das Element E1. |
||
E1 E2 { ... } |
Jedes Element E2, das ein beliebiger Nachkomme eines Elementes E1 ist. |
||
E1 > E2 { ... } |
Jedes Element E2, das ein direkter Nachkomme eines Elementes E1 ist. (Siehe Dokumentstammbaum.) |
||
E1 + E2 { ... } |
Gilt für jedes Element E2, wenn es direkt auf E1 folgt und wenn E1 und E2 dasselbe Elternelement haben. |
||
E [att] { ... } |
Jedes Element E, das ein Attribut att mit einem beliebigen Wert hat 1).HTML-Syntax: <E att="..."> |
||
E [att=val] { ... } |
Jedes Element E, das ein Attribut att mit dem Wert val hat 1).HTML-Syntax: <E att="val"> |
||
E [att~=val1] { ... } |
Jedes Element E, das ein Attribut att mit mehreren Werten hat, von denen einer gleich val1 sein muss 1).HTML-Syntax: <E att="val1 val2 ..."> |
||
E [att|=val1] { ... } |
Jedes Element E, das ein Attribut att hat, dessen Wert entweder exakt gleich val1 ist oder dessen Wert mit der Zeichenkette val1- beginnt 1).HTML-Syntax: <E att="val1"> oder <E att="val1-...">, aber nicht: <E att="val2-..."> |
||
E #id { ... } |
Alle Elemente E mit dem Attribut id 1).HTML-Syntax: <E id="..."> |
||
.class |
Alle Elemente E mit dem Attribut class 1).HTML-Syntax: <E class="..."> |
||
| Selektor | CSS-Syntax | Bedeutung und Anwendbarkeit | |
Pseudoklassen | |||
Pseudoklasse :first-child |
E:first-child { ... } |
Jedes Element E, wenn es das erste Kindelement eines anderen Elements ist. 1) (Siehe Dokumentstammbaum) | |
Link-Pseudoklassen (Gruppierung verboten!) |
E:link { ... } |
Die Deklaration trifft nur auf Elemente E zu, die unbesuchte Hyperlinks sind. :link und :visited dürfen nicht gruppiert werden. 1) |
|
E:visited { ... } |
Die Deklaration trifft nur auf Elemente E zu, die besuchte Hyperlinks sind. :link und :visited dürfen nicht gruppiert werden. 1) |
||
Dynamische Pseudoklassen (Gruppierung möglich) |
E:hover { ... } |
Die Deklaration trifft auf Anker-Elemente zu, über die der Mauszeiger gehalten wird. 1) | |
E:active { ... } |
Die Deklaration trifft auf Anker-Elemente zu, die per Tastendruck oder Mausklick aktiviert worden sind 1) | ||
E:focus { ... } |
Die Deklaration trifft auf Anker-Elemente zu, die durch Druck der Tabulator- oder anderer Tasten in den Fokus gekommen sind. 1) | ||
E:lang(..) { ... } |
Trifft zu auf alle Elemente E, für die die angegebene Sprache im Webdokument definiert ist. 1) |
||
| Selektor | CSS-Syntax | Bedeutung und Anwendbarkeit | |
Pseudoelemente | |||
E:first-line { ... } |
Trifft zu auf die erste Zeile Text innerhalb des Elementes E. 1) |
||
E:first-letter { ... } |
Trifft zu auf das erste Zeichen im Text innerhalb des Elementes E. 1) |
||
E:before { ... } |
Generiert zusätzliche Inhalte vor dem Inhalt des Elements E. 1) |
||
E:after { ... } |
Generiert zusätzliche Inhalte nach dem Inhalt des Elements E 1) |
||