Einfachselektoren in CSS mit Kombinatoren verknüpfen
In CSS können über verschiedene Zeichen, die auch Kombinatoren genannt werden, mehrere Einfachselektoren verknüpft werden. Solch verknüpfte Selektoren werden auch Kombinationsselektoren genannt. Dadurch kann die Anwendung der Stile auf bestimmte Muster innerhalb der Seitenstruktur begrenzt werden. Diese werden wie folgt unterteilt:
Nachfahrselektor
Mit Leerzeichen verknüpfte Selektoren werden Nachfahrselektoren genannt, da der Stil für ein "Nachfahre" eines davor definierten Einfachselektors bestimmt ist. Das Nachfahrelement kann direkt ein Kindelement des Einfachselektors sein oder in tieferen Strukturen der Website vorkommen. Die Stile werden dabei allen Nachfahrelementen zugewiesen, die sich innerhalb der Struktur befinden. Es können auch mehr als zwei Selektoren miteinander verknüpft werden. Ein Beispielcode in CSS, um allen A-Tags Stile zuzuweisen, die sich unterhalb des LI-Tags befinden, die wiederum unterhalb des UL-Tags vorkommen.
ul li a { color: red; }Es lassen sich nicht nur Elementselektoren verknüpfen, sondern auch andere Einfachselektoren (ID-, Klassen-, Universal- und Attributselektoren). Beim folgenden Beispiel werden alle Elemente mit dem Attribut title angesprochen, die sich unterhalb von Absätzen (P-Tag) befinden. Jedoch nur in den Absätzen, die sich unterhalb von Elementen befinden, denen die Klasse nav zugewiesen wurde und die sich wiederum unterhalb des Elements mit der ID footer befinden.
#footer .nav p [title] { padding: 5px; }Kindselektor
Bei einem Kindselektor wird als Kombinator ein > (Größer-als-Zeichen) zwischen den Einfachselektoren eingesetzt. Der Unterschied zum Nachfahrselektor besteht darin, dass die Stile nur bei den direkten Kindelementen des davor definierten Einfachselektors angewendet werden. Beispielsweise könnte man den A-Tags Stile zuweisen, die direkte Kindelemente des LI-Tags sind. Kommt der A-Tag in tieferen Strukturen der Website vor, bleiben diese unberücksichtigt.
Die Stile werden bei diesem Beispiel allen A-Tags zugewiesen, die direkte Kindelemente des LI-Tags sind. Auch beim Kindselektor kann man mehrere Einfachselektoren miteinander verknüpfen. Ein Beispiel, um alle STRONG-Tags zu formatieren, die direkte Kindelemente des A-Tags sind und die wiederum direkte Kindelemente des LI-Tags sind.
li a strong { color: red; }Beim Kindselektor kann man ebenfalls mehrere Einfachselektor-Typen miteinander kombinieren. Beim folgenden Beispiel werden die Stile nur bei Elementen mit dem Attribut title angewendet, die direkte Kindelemente von P-Tags sind, die P-Tags direkte Kindelemente von den Elementen sind, denen die Klasse nav zugewiesen wurde und diese wiederum direkte Kindelemente von dem Element mit der ID footer sind.
#footer > .nav > p > [title] { padding: 5px; }Geschwisterselektor
Bei einem Geschwisterselektor wird das Zeichen + (Plus) zwischen den Einfachselektoren als Kombinator eingesetzt. Hierbei werden die Stile nur dann angewendet, wenn sich die Einfachselektoren auf gleicher Ebene nebeneinander befinden. Ein typisches Beispiel ist der H1-Tag und der P-Tag. Häufig wird auf einer Website mit dem H1-Tag eine Überschrift der Ebene 1 definiert und es folgt ein Absatz mit dem P-Tag. Werden z.B. H1- und P-Tag zu einem Geschwisterselektor verknüpft, kann man erreichen, dass die Stile nur im ersten Absatz nach einer Überschrift der Ebene 1 angewendet werden. Solch verknüpfte Selektoren werden auch direkte Geschwisterselektoren genannt, da nur direkt folgende Elemente berücksichtigt werden.
Die Stile werden in diesem Beispiel nur den Absätzen zugewiesen, die direkt einer Überschrift der Ebene 1 folgen. Beim Geschwisterselektor kann man ebenfalls mehrere Einfachselektoren zu einer Kette verknüpfen und die Anwendung der Stile weiter eingrenzen. Beim folgenden Beispiel würden die Stile beim PRE-Tag nur dann angewendet werden, wenn es direkt dem P-Tag folgt und der wiederum direkt einem H1-Tag folgt.
h1 + p + pre { color: red; }Wichtig hierbei ist, dass die Einfachselektoren in der Seitenstruktur sich auf einer Ebene befinden. Das hat zur Folge, dass alle angegebenen Einfachselektoren in der Regel entweder Inline- oder Block-Elemente sind. Denn, Inline-Elemente müssen in Block-Elementen platziert werden und können selbst keine Block-Elemente enthalten. Sie sind daher normalerweise nicht auf derselben Ebene wie ein Block-Element. Das folgende Beispiel würde bei validem HTML-Code normalerweise nicht zutreffen, da der STRONG-Tag ein Inline-Element ist und gewöhnlich in einem P-Tag platziert wird und nicht neben einem P-Tag.
h1 + p + strong { color: red; }Auch beim Geschwisterselektor lassen sich mehrere Einfachselektor-Typen miteinander kombinieren. Wichtig ist auch hier, dass sie sich auf einer Ebene befinden und direkt nacheinander in der Dokumentenstruktur vorkommen. Beim folgenden Beispiel gelten die Stile nur bei einem Element mit dem Attribut title, das auf derselben Ebene dem P-Tag folgt, der wiederum einem Element folgt, dem die Klasse nav zugewiesen wurde und einem Element mit der ID bezeichnung folgt.
#bezeichnung + .nav + p + [title] { color: red; }Indirekter Geschwisterselektor
Bei einem indirekten Geschwisterselektor wird als Kombinator ein ~ (Tilde-Zeichen) eingesetzt. Der Unterschied zum direkten Geschwisterselektor besteht darin, dass das Geschwisterelement nicht direkt dem davor definierten Element folgen muss. Zwischen den beiden Elementen können auch andere Elemente vorkommen. Das hat zur Folge, dass die Stile allen Geschwisterelementen zugewiesen werden, die sich auf derselben Ebene des davor definierten Elements befinden. Denn, würde man z.B. ein Geschwisterselektor wie auf der folgenden Abbildung definieren und hätte man nach der Überschrift 1 mehrere Absätze, würde das Muster auf alle Absätze zutreffen, da sie nicht direkt der Überschrift 1 folgen müssen.
Beim indirekten Geschwisterselektor lassen sich mehrere Einfachselektoren ebenfalls zu einer Kette verknüpfen. Beim folgenden Beispiel kommen die Stile bei allen PRE-Tags zur Anwendung, die auf derselben Ebene einem P-Tag und die wiederum einem H1-Tag folgen. Zwischen den Elementen können beliebige andere Elemente vorkommen.
h1 ~ p ~ pre { color: red; }Auch beim indirekten Geschwisterselektor kann man Inline- und Block-Elemente in der Regel nicht miteinander kombinieren, da Inline-Elemente innerhalb von Block-Elementen platziert werden müssen. Der folgende Stil würde normalerweise nicht zur Anwendung kommen, da STRONG-Tags gewöhnlich in P-Tags platziert werden.
h1 ~ p ~ strong { color: red; }Eine Verknüpfung von verschiedenen Einfachselektor-Typen ist beim indirekten Geschwisterselektor genauso möglich wie beim direkten Geschwisterselektor. Hierbei ist ebenfalls wichtig, dass sich die Elemente auf einer Ebene befinden. Ob dazwischen andere Elemente vorkommen, spielt dagegen keine Rolle. Beim folgenden Beispiel gelten die Stile bei den Elementen, die mit dem Attribut title versehen wurden auf derselben Ebene einem P-Tag folgen, der P-Tag wiederum einem Element folgt, dem die Klasse nav zugewiesen wurde und einem Element mit der ID bezeichnung folgt.
#bezeichnung ~ .nav ~ p ~ [title] { color: red; }Kombinieren mit verschiedenen Kombinatoren
Bei all den genannten Kombinationsselektoren lassen sich nicht nur verschiedene Einfachselektoren kombinieren, sondern auch verschiedene Kombinatoren.
#bezeichnung .nav > p + pre ~ [title] { color: red; } Bei diesem Beispiel würden die Stile bei den Elementen angewendet werden, die mit dem Attribut title versehen wurden, die auf derselben Ebene einem PRE-Tag folgen, der PRE-Tag muss direkt einem P-Tag folgen, der P-Tag muss sich innerhalb eines Elements als direktes Kindelement befinden, dem die Klasse nav zugewiesen wurde und das Element muss sich wiederum (direkt oder indirekt) in einem Element befinden, dem die ID bezeichnung zugewiesen wurde.