CSS 2.1 ::Vollreferenz
CSS 2.1: Die Selektoren
Allgemeines:
Jedes Element innerhalb eines Webdokuments steht in einem genau definierten Verhältnis zu seinem Kontext. Mit Hilfe von Selektoren lassen sich nun Elemente allein nach ihrer Stellung auswählen (=selektieren), die sie gegenüber anderen Elementen einnehmen (Kind-, Geschwister- oder Nachfahren- Selektor). Dabei können wir immer nur zur Seite (Geschwister) oder nach unten (Nachfahren) deklarieren. Es gibt keine Selektoren, die Eltern oder Vorfahren eines Elements auswählen.
Eine genauere Erklärung über die Verhältnisse von HTML-Elementen zueinander findet sich im Beitrag über den Dokumentstammbaum. Auf dieser Seite wollen wir uns damit befassen, wie wir mit Hilfe der Selektoren auf diese Elemente eines Webdokuments zugreifen können.
Elemente lassen sich aber nicht nur über ihre Stellung innerhalb des Dokuments selektieren, sondern auch nach ihren Attributen (ID, Klassen- und Attributselektor). Die allgemeinste Selektion ist durch Universal- und Typselektor möglich.
Musterabgleich (pattern matching)
Der Musterabgleich hat den Zweck, die durch einen Selektor definierten Bedingungen daraufhin zu prüfen, ob sie mit einem Element des Webdokuments zusammenpassen. Diese Bedingungen bestehen aus Einfach- Selektoren und Kombinatoren des Selektors und deren Zusammensetzung. So bedingt z. B. das Pseudoelement :first-child
eine Einschränkung auf das erste Kindelement und eine Kombination 'DIV P
' gilt nur für Absätze P
, die Nachkommenelement eines DIV
-Containers sind. Nur auf Elemente des Webdokuments, die diese Bedingungen erfüllen, werden die dazu gehörigen Deklarationen angebracht.
Gruppierung
Gelegentlich möchte man für mehrere Selektoren dieselbe Deklaration verwenden. Damit nun nicht die gleiche Regel mehrfach notiert werden muß, verwendet man die Technik der Gruppierung. Dabei werden die betreffenden Selektoren, durch Kommata getrennt, hintereinander eingetragen.
Aus:
h1 { ... }
h2 { ... }
h3 { ... }
h4 { ... }
Wird dann:
h1,h2,h3,h4 { ... }
Auf diese Weise werden mehrere Regeln zu einer Regel zusammengefaßt, deren Deklarationen für alle notierten Selektoren gelten.
Liste der Selektoren
Eigenschaft | CSS 2.1 | CSS Mobile |
Attributselektor (attribute) | 5.8 | — |
ID-Selektor (id) | 5.9 | Selectors |
Kindselektor (child) | 5.6 | Selectors |
Klassenselektor (class) | 5.8.3 | Selectors |
Nachbarselektor (adjacent sibling) | 5.7 | — |
Nachfahrenselektor (descendant) | 5.5 | Selectors |
Typselektor (element/type) | 5.4 | Selectors |
Universalselektor (universal) | 5.3 | Selectors |