Der eigene Onlineshop für Fotografen

Workshop HTML5 & CSS3 - Stephan Heller

Der Beitrag "Alle CSS3 Selektoren im Detail" besteht aus fünf Seiten

Kombinationsselektoren (Combinators) - Alle CSS3 Selektoren im Detail

Im Englischen werden Selektoren aus diesem Bereich als »Combinators« bezeichnet. Wörtlich genommen wäre »Kombinatoren« das bessere Wort, da es die Eigenschaften dieser Selektoren konkret benennt. Allerdings haben sich Begrifflichkeiten wie Kindselektor oder Elternseletor etabliert. »Kindkombinator« wäre keine falsche Bezeichnung, ist aber unter Entwicklern nicht geläufig.

Nachfahrselektor (Descendant combinator)

p strong {
   ...
}

Steuert alle HTML-Elemente des am Ende stehenden Einfachselektors (in diesem Fall strong), die innerhalb der davor definierten Einfachselektoren (hier in p-Elementen) vorkommen. Dabei spielt es keine Rolle, ob das Nachfahrelement (im Beispiel strong) ein direktes Kindelement ist oder in einer tieferen HTML-Struktur vorkommt.

Dabei sind die einzelnen Einfachselektoren nicht auf Elementselektoren beschränkt, es können auch alle anderen Typen von Selektoren eingesetzt werden.

#footer li {
   ...
}

Hier wird ein ID-Selektor mit einem Elementselektor kombiniert. In diesem Bespiel werden alle Listeneinträge im Seitenfuß der Webseite gesteuert.

#footer li a {
   ...
}

Der mit dem Nachfahrselektor aufgebaute Kombinationsselektor ist nicht auf zwei Elemente beschränkt. In diesem Beispiel sehen sie drei Einfachselektoren, die miteinander kombiniert werden. Über diese Anweisung können Sie dann ausschließlich Links steuern, die in Listeneinträgen stehen, die wiederum nur im #footer vorkommen. Diese Verschachtelung kann beliebig tief sein und spiegelt gleichzeitig im CSS einen Teil der HTML-Struktur wieder.

Mit etwas Erfahrung können Sie an einer solchen Anweisung die Struktur des HTML »lesen«, ohne den Quelltext selber kennen zu müssen. Oder anders herum: Sollte eine CSS-Regel nicht greifen, könnte eine Verkettung der Einfachselektoren die Ursache sein, die nicht mit der Struktur des angesprochenen HTML übereinstimmt.

Der Nachfahrselektor gehört zu den am häufigsten eingesetzten Selektoren und ist »das Mittel der Wahl«, um einen effektiven Kombinationsselektor aufzubauen. Im Theorieteil des Buches wird im Kapitel 36.2 im Detail beschrieben, wie sie Kombinationsselektoren aufbauen und wie diese wirken.

Kindselektor (Child combinator)

p > strong {
   ...
}

Der Kindselektor ähnelt dem Nachfahrselektor, allerdings wird hier ein > (Größer-als-Zeichen) zwischen den beiden Einfachselektoren notiert. Damit werden nicht alle, sondern nur die direkten Kindelemente gesteuert, in diesem Fall nur strong-Elemente, die direkt unterhalb des p-Tags vorkommen, aber nicht jene, die in einer tieferen, verschachtelten Struktur sind.

#inhalt p > strong {
   ...
}

Auch der Kindselektor kann mit anderen Arten von Selektoren kombiniert werden. So beseht dieser komplette Selektor mit den Angaben #inhalt und p aus einem Nachfahrselektor, die Angabe p > strong stellen einen Kindselektor dar.

Direkter Geschwisterselektor (Adjacent sibling combinator)

h1 + ol {
   ...
}

Der »direkte« Geschwisterselektor unterscheidet sich vom Kindselektor durch das + (Pluszeichen). Damit werden Elemente gesteuert, die im HTML auf gleicher Ebene sind und direkt hintereinander folgen. Die Regel selber wirkt auf den als zweiten angegeben Einfachselektor, in dem Beispiel also das ol.

Die Angabe in diesem Beispiel würde eine geordnete Liste ol steuern: Eine ol könnte übergreifend mit dem gleichen oberen Abstand versehen werden, sodass stets der gleiche Zwischenraum zu davor vorkommenden Elementen eingehalten wird. Falls eine ol jedoch direkt hinter einer h1 stehen würde, bestünde mit dieser Anweisung die Möglichkeit, nur für diese spezielle Kombination von HTML-Elementen einen anderen oberen Abstand zu definieren.

Indirekter Geschwisterselektor (General sibling combinator)

h2 ~ p {
   ...
}

Der indirekte Geschwisterselektor unterscheidet sich zum direkten Geschwisterselektor dadurch, dass die Elemente nicht direkt aufeinander folgen müssen, sondern auch andere HTML-Elemente zwischen den beiden angegebenen Selektoren stehen dürfen. Ein weiterer Unterschied ist, dass darüber nicht nur genau ein nachfolgendes Element gesteuert wird, sondern alle HTML-Elemente, welche die Eigenschaften des zweiten Einfachselektor im Selektor entsprechen.

Mit diesem Beispiel würden Sie alle p-Elemente steuern, die hinter einer h2 auf gleicher Ebene in der HTML-Struktur vorkommen.


Weitere Seiten des Beitrags "Alle CSS3 Selektoren im Detail":

Buchempfehlungen