CSS-Layout

Selektoren, Stilvorlagen und Spezifität

In CSS wird mit Selektoren bestimmt, welche Eigenschaften für welche Elemente in einem Dokument zutreffen. Treffen mehrere Angaben auf ein Element zu, entscheidet die Spezifität der Selektorenkombination, welche Angabe letztlich die Präsentation bestimmt.

Ferner können Eigenschaften an verschiedenen Stellen von verschiedenen Parteien notiert sein. Auch dies entscheidet darüber, welche Angabe letztlich zur Präsentation kommt.

Die Kaskade

Stilvorlagen, die für ein Dokument wirksam sind, können von verschiedenen Parteien angegeben sein. Dies ist erstens der Autor des Dokumentes, zweitens das Darstellungsprogramm und drittens der Nutzer des Darstellungsprogrammes.

Der Autor kann auf verschiedene Weise Angaben zu Eigenschaften machen. Zum einen in eigenständigen Dateien für eine Stilvorlage, aber auch bei einigen Formaten wie (X)HTML oder SVG innerhalb des zu dekorierenden Dokumentes in speziellen Elementen oder Attributen. Ferner kann es insbesondere bei SVG und älteren Versionen von (X)HTML auch Präsentationsattribute geben, die ebenfalls wirksam sind.

Das Darstellungsprogramm hat für die Präsentation bekannter Formate jeweils eine eigene Stilvorlage, die festlegt, wie ein Dokument des jeweiligen Formates dargestellt werden soll. Diese Stilvorlage wird angewendet, bevor alle anderen Stilvorlagen angewendet werden. Die Stilvorlage des Darstellungsprogrammes hat also ein niedrigeres Gewicht und kommt bei einem Element nur zum Tragen, wenn keine andere Stilvorlage wirksam wird.

Der Nutzer des Darstellungsprogrammes kann ebenfalls eine Stilvorlage beisteuern. Diese überschreibt gegebenenfalls die Stilvorlage des Darstellungsprogrammes. Daneben kann das Darstellungsprogramm auch eine gleichwertige Methode bereitstellen, mit der der Nutzer entsprechende Angaben machen kann. Die Angaben überschreiben nur die Angaben des Autors, wenn eine !important-Regel verwendet wird. Entsprechende Angaben mit so hohem Gewicht sind etwa beliebt für die minimale Schriftgröße und können vom Autor des Dokumentes nicht überschrieben werden. Das Darstellungsprogramm sollte auch eine Möglichkeit anbieten, alle Autoren-Stilvorlagen zu deaktivieren.

Die Angaben aus den drei Quellen können in der Kaskade, in der Eigenschaften vererbt werden, also überlappen. Entsprechend hat für ein verschachteltes Element die Angabe des Autors mehr Gewicht, so daß die anderen Stilvorlagen überschrieben werden. Oder - sofern der Nutzer Wert darauf legt - müssen seine Angaben mehr Gewicht mit der !important-Regel erhalten, um die Angaben des Autors zu überschreiben.

Darüberhinaus entscheidet bei mehreren Stilvorlagen aus der gleichen Quelle die Reihenfolge, in der die Angaben eingebunden werden und im Quelltext stehen. Bei gleicher Spezifität gilt dann die letzte Angabe.

Selektoren

Mit Selektoren wird ausgewählt, für welche Elemente die danach in Klammern notierten Eigenschaften zutreffen. Die Herkunft aus einer der genannten Quellen ist jedenfalls immer von höherer Priorität als die Auswahl per Selektor, die immer nur bei Angaben aus derselben Quelle relevant wird.

Nach einem Selektor werden Eigenschaften in geschweiften Klammern notiert. Eine Klammer kann für mehrere Selektoren gelten, wenn diese per Komma getrennt notiert werden. Selektoren können ferner hintereinander notiert werden, um eine tiefere Verschachtelung zu kennzeichnen. Die mit einem Doppelpunkt beginnenden Selektoren wie :hover können auch kombiniert werden, um anzugeben, daß mehrere davon zutreffen müssen, um ein Element zu selektieren. :link:hover etwa trifft nur auf Verweise zu, wenn ein Zeigergerät drüberfährt.

Folgende Selektoren sind in CSS 2.0 definiert. Dabei repräsentieren E und F Namen von Elementen im Dokument, A repräsentiert ein im Element notiertes Attribut. K repräsentiert einen Klassennamen, der als ein Listenwert in (X)HTML oder SVG im Attribut class notiert ist.

Selektor	Bedeutung	Beispiele
*	Universeller Selektor, trifft auf jedes Element zu.	XHTML SVG.
E	Trifft auf jedes Element mit Namen 'E' zu. 'E' ist dann in der Stilvorlage jeweils durch den konkreten Elementnamen zu ersetzen.	XHTML SVG.
E F	Werden zwei Elementnamen E und F mit einem Leerzeichen dazwischen notiert, so trifft dies auf alle Elemente F zu, die innerhalb eines Elementes E notiert sind, also Nachfahren von E sind. Das trifft also auch zu, wenn in der Verschachtelung oder Kaskade noch Elemente dazwischen notiert sind.	XHTML SVG.
E > F	Trifft auf jedes Element F zu, welches ein direktes Kindelement eines Elementes E ist.	XHTML SVG.
E:first-child	Trifft auf das erste Kindelement E eines Elternelementes zu. 'div p:first-child' trifft also auf den ersten Absatz p innerhalb eines div-Elementes zu.	XHTML SVG.
E:link	Trifft zu auf Element E, falls E der Anker für einen (Hyper-)Verweis ist, welcher noch nicht besucht wurde.	XHTML SVG.
E:visited	Trifft zu auf Element E, falls E der Anker für einen (Hyper-)Verweis ist, welcher bereits besucht wurde.	XHTML SVG.
E:active	Trifft zu auf Element E, solange E aktiviert ist, zum Beispiel über die Zeitspanne, in der ein Element mit einem Zeigergerät angeklickert wird oder auf auch über die Tastatur angesprochen wird. Prinzipiell kann jedes Element vom Nutzer aktiviert werden, wenn dies in der jeweiligen Sprache nicht explizit ausgeschlossen ist.	XHTML SVG.
E:focus	Trifft zu auf Element E, solange E den Fokus hat, also Tastatureingaben oder Texteingaben akzeptiert. Prinzipiell kann jedes Element vom Nutzer aktiviert werden, wenn dies in der jeweiligen Sprache nicht explizt ausgeschlossen ist.	XHTML SVG.
E:hover	Trifft zu auf Element E, solange E gekennzeichnet ist, etwa wenn sich ein Zeigegerät über dem Element befindet. Es ist allerdings nicht exakt festgelegt, ob sich das Zeigerät bewegen muß oder ob sich auch das Element bewegen darf, um den Zustand zu ändern. Die Kennzeichnung kann auch anderweitig erfolgen und ist von den technischen Möglichkeiten des verwendeten Gerätes abhängig. Prinzipiell kann jedes Element vom Nutzer so ausgewählt werden, wenn dies in der jeweiligen Sprache nicht explizt ausgeschlossen ist.	XHTML SVG.
E:lang(c)	Trifft zu auf Element E, wenn es so gekennzeichnet ist, daß es zur (menschlichen) Sprache c gehört. c steht in dem Falle für ein internationales Sprachkürzel wie de für deutsch oder en für englisch. Die Dokumentsprache definiert, wie die Sprache dort anzugeben ist, in XML-Formaten etwa mit xml:lang.	XHTML SVG.
E + F	Trifft auf jedes Element F zu, dem ein Element E direkt vorangeht.	XHTML SVG.
E[A]	Trifft auf jedes Element E zu, bei dem ein Attribut A notiert ist, egal mit welchem Wert.	XHTML SVG.
E[A="wert"]	Trifft auf jedes Element E zu, bei dem ein Attribut A mit dem Wert 'wert' notiert ist.	XHTML SVG.
E[A~="wert"]	Trifft auf jedes Element E zu, bei dem ein Attribut A notiert ist. Der Wert des Attributes muß eine mit Leerzeichen separierte Liste von Werten sein. Einer dieser Listenwerte muß 'wert' sein.	XHTML SVG.
E[A|="wert"]	Trifft auf jedes Element E zu, bei dem ein Attribut A notiert ist. Der Wert des Attributes muß eine mit Bindestrichen separierte Liste von Werten sein. Die Liste muß von links mit 'wert' beginnen. Typisch tritt dies bei (X)HTML oder SVG auf beim Attribut xml:lang mit entsprechenden Sprachkürzeln wie en-gb oder de-de auf.	XHTML SVG.
E.K	Trifft auf jedes Element E zu, welches zur Klasse K gehört. Wie Klassen notiert werden, muß in der Dokumentsprache definiert sein, zum Beispiel als Listenwert im Attribut class in (X)HTML oder SVG. Dieser Selektor entspricht dann dem Selektor E[class~="K"].	XHTML SVG.
E#wert	Trifft auf jedes Element E zu, welches einen Fragmentidentifizierer mit dem Wert 'wert' hat. In (X)HTML oder SVG ist dies der Wert des Attributes id, in XML ganz allgemein der Wert des Attributes xml:id.	XHTML SVG.

Spezifität

Verschiedene Selektoren können eine unterschiedliche Spezifität haben. Über die Spezifität wird festgelegt, welche Selektorkombination letztlich für ein Element wirksam wird, dies ist jene mit der höchsten Spezifität.

Die Spezifität eines Selektors wird wie folgt bestimmt:

• Sei a die Anzahl der Bezeichner-Selektoren in einem Selektor
• Sei b die Anzahl weiterer attributbezogener Selektoren in einem Selektor
• Sei c die Anzahl der Element-Selektoren in einem Selektor
• Pseudo-Elemente werden nicht berücksichtigt
• Universalselektoren zählen weder zu a, noch zu b, noch zu c.

Ein Selektor mit dem größten a wird wirksam. Gibt es mehrere zutreffende Selektoren mit gleichem a, so entscheidet zwischen diesen beiden das größere b. Ist allerdings auch das b gleich, so entscheidet das größere c. Ist auch das c gleich, so entscheidet die Reihenfolge im Quelltext, der später notierte Selektor entscheidet in dem Falle.

Ist bei (X)HTML oder SVG bei einem Element ein Attribut style angegeben, so entspricht dies in der Wertung einem Bezeichner-Selektor, ergibt also a=1. Diese Regel gilt dann als zuletzt im Quelltext notiert verglichen mit denen in Stilvorlagen-Bereichen, egal wo diese sich relativ dazu befinden oder referenziert werden. Man beachte dabei auch, daß abweichend dazu in CSS 2.1 für Eigenschaften in style gilt, daß diese immer die höchste Spezifität haben, also nicht überschrieben werden können. Aufgrund dieses Widerspruches zu CSS 2.0 ist die Spezifität für Angaben in style also nicht eindeutig definiert, auch deshalb sollte die Verwendung dieses Attributes gänzlich vermieden werden.

Ein weiterer Spezialfall ergibt sich für Präsentationsattribute, die CSS-Eigenschaften entsprechen und die in (X)HTML oder SVG ebenfalls notiert sein können. Nach obiger Zählung gilt dafür a=b=c=0. Im Rahmen der Regel der Quelltextreihenfolge, gelten diese als zu Beginn der Autorenstilvorlage notiert, haben also eine noch geringere Spezifität als ein in der Autorenstilvorlage notierter Universalselektor.