Cascading Style Sheets ::Schnellreferenz

CSS 2.1: Selektoren, Pseudoklassen, Pseudoelemente

Eigenschaft

Browser-Support

Attributselektor (attribute)
IE/Mac 5.x, IE/Win 5.x, IE/Win 6:
Der Microsoft-Browser ist auf beiden Systemen bis zur Version 6 nicht in der Lage, den Attribut-Selektor zu erkennen.
IE 7:
Von Version 7 an kann der IE alle Selektoren verarbeiten.

TOP

ID-Selektor (id)
Alle Browser:
Der ID-Selektor wird von allen modernen Browsern erkannt.

TOP

Kindselektor (child)
IE/Win 6:
MS IE/Win bis Version 6 erkennt den Kindselektor noch nicht. IE/Mac dagegen erkennt ihn.
IE 7:
Von Version 7 an kann der IE alle Selektoren verarbeiten.

TOP

Klassenselektor (class)
IE/Win 5.x, IE/Win 6
MS IE/Win Versionen 5.x und 6 erkennen Klassen problemlos, verhaspeln sich aber gelegentlich, wenn mehrere Klassen im selben Attribut auftauchen.
IE 7
IE 7 ist in Bezug auf Klassen ganz auf dem Stand von CSS 2.1.

TOP

Geschwister- Selektor (adjacent sibling)
IE/Win 6:
MS IE/Win bis Version 6 erkennt den Geschwister- Selektor noch nicht. IE/Mac dagegen erkennt ihn.
IE 7:
Von Version 7 an kann der IE alle Selektoren verarbeiten.

TOP

Nachfahrenselektor (descendant)
Alle Browser:
Der Nachfahren-Selektor wird von allen modernen Browsern erkannt.

TOP

Typselektor (element/type)
Alle Browser:
Der Typselektor wird von allen modernen Browsern erkannt.

TOP

Universalselektor (universal)
Alle Browser:
Der Universalselektor wird von allen modernen Browsern erkannt.

TOP

Pseudoklassen

Eigenschaft

Browser-Support

Dynamische Pseudoklassen :active:focus:hover
IE/Win 5.x, IE/Win 6
MS IE/Win bis Version 6 stellt :active nicht immer mit allen deklarierten Eigenschaften dar. Die Pseudoklasse :hover wird nur am Element a erkannt, :focus überhaupt nicht. Auch die Forderung, dass die drei dynamischen Pseudoklassen sich nicht gegenseitig ausschließen sollen, wird nicht uneingeschränkt so interpretiert.
IE/Mac 5.x
IE/Mac 5.x stellt :active nicht immer mit allen deklarierten Eigenschaften dar. Die Pseudoklasse :hover wird nur am Element a erkannt, IE/Mac 5 erkennt aber :focus. Es ist empfehlenswert, im Einzelfall gründlich zu testen.
IE 7
IE 7 unterstützt :hover an allen Elementen. Die Forderung zur gegenseitigen Exklusivität wird jetzt ebenfalls erfüllt. Was noch aussteht, ist das Erkennen der Pseudoklasse :focus.

TOP

Strukturelle Pseudoklasse :first-child
IE/Win 5.x, IE/Win 6
MS IE/Win bis Version 6 erkennen die Pseudoklasse :first-child noch nicht.
IE/Mac 5.x dagegen erkennt sie bereits.
IE 7:
Von Version 7 an hat Microsoft die Verarbeitung dieser Pseudoklasse ermöglicht.

TOP

Sprach-Pseudoklasse :lang(n)
IE/Win 5.x, IE/Win 6, IE 7
MS IE/Win einschließlich Version 7 erkennen die Sprach-Pseudoklasse :lang noch nicht.
IE/Mac 5.x dagegen erkennt sie bereits.

TOP

Druck-Pseudoklassen :first:left:right
Alle Browser:
Die Unterstützung der Eigenschaften zur Drucksteuerung ist zur Zeit noch zu lückenhaft für die Produktion, sodass sich eine detaillierte Erläuterung noch nicht lohnt. Es sind aber andererseits auch keine negativen Auswirkungen dieser Eigenschaften bekannt.

TOP

Pseudoelemente

Eigenschaft

Browser-Support

:before, :after
IE/Win 5.x, IE/Win 6, IE 7
IE/Win erkennt beide Pseudo-Elemente nicht.

TOP

:first-letter
IE/Win 5.0
IE/Win erkennt dieses Pseudo-Element erst ab Version 5.5.
IE 7
  • IE 7 honoriert die Eigenschaft float nicht in Verbindung mit der Pseudoklasse :first-letter.
  • Bestimmte Buchstabenkombinationen an Textbeginn, wie 'Ae' oder das holländische 'Ij' erkennt er nicht.
  • Da IE 7 noch keinen generierten Inhalt kennt, kann er auch das erste Zeichen daraus nicht selektieren.
  • Formatierungen mit margin, border oder padding werden beim Scrollen durch die folgenden Zeile abgeschnitten. Nach Öffnen und Schließen eines anderen Fensters werden sie vollständig dargestellt.
Firefox 1.5
Auch die Gecko-Engine erkennt noch nicht zusammen gehörende Buchstabenkombinationen am Anfang des Absatzes.
Opera 9
Auch bei Opera bis Version 9 können die Formatierungen mit margin, border oder padding mit der nächsten Zeile überlappen. Dieser Browser erkennt ebenfalls noch nicht zusammen gehörende Buchstabenkombinationen am Anfang des Absatzes. Zudem selektiert er das erste Zeichen nicht in generiertem Inhalt.
Konqueror 3.5
Formatierungen mit margin, border oder padding können in die folgenden Zeile hineinragen. Zusammen hängende Buchstabenkombinationen am Textbeginn werden auch hier nicht selektiert. Bei Formatierung von generiertem Inhalt mit :first-letter werden einige Eigenschaften des zugehörigen Elementes übernommen.

TOP

:first-line

Das Pseudo-Element first-line wird größtenteils von allen modernen Browsern unterstützt, mit kleinen Einschränkungen:

Alle Browser
Die Eigenschaft vertical-align wird innerhalb von Fließtext nicht zusammen mit :first-line angewandt. Auch Text, der sich innerhalb eines Nachfahrenelementes befindet, wird nicht formatiert.
IE/Win 5.0
IE/Win erkennt dieses Pseudo-Element erst ab Version 5.5.
Opera 9
Opera bis Version 9 produziert im Zusammenhang mit der Eigenschaft letter-spacing gelegentlich Buchstabensalat am Zeilenende.
Konqueror 3.5
Konqueror wendet die Eigenschaft text-transform nicht auf dieses Pseudo- Element an. Dagegen bringt er die deklarierten Eigenschaften auch an Inline- Elementen an.

TOP

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:
Diese Selektoren und Pseudoklassen/-elemente können mit Typselektoren oder mit Universalselektoren eingesetzt werden.
TOP

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)
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 E1)
E:first-letter { ... }
Trifft zu auf das erste Zeichen im Text innerhalb des Elementes E1)
E:before { ... }
Generiert zusätzliche Inhalte vor dem Inhalt des Elements E1)
E:after { ... }
Generiert zusätzliche Inhalte nach dem Inhalt des Elements E 1)


Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

Die URL dieser Seite ist: www.thestyleworks.de/quickref/selector-12.shtml
Gedruckt am Sonntag, dem 21. September, 2014.
© Copyright All Contents 2002- 2014 K. Langenberg.
Commercial Use prohibited.


Notizen: