CSS/Tutorials/Selektoren/Kombinator

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS


Kombinatoren sind Zeichen, die zwei Selektoren miteinander verketten. Durch diese Verkettung bildet der erste Teilselektor eine Bedingung und der zweite Teilselektor das Ziel, das angesprochen werden soll, wenn die Bedingung erfüllt wurde. Der Kombinator gibt dabei an, in welchem Verhältnis die Teilselektoren vor und nach ihm zueinander stehen müssen.

Zwischen zwei Selektoren kann nur ein Kombinator stehen, jedoch kann an diese Kette ein weiterer Kombinator zusammen mit einem weiteren Teilselektor angehängt werden.

Die Bedeutung von kombinierten Selektoren ähnelt der von Pseudoklassen, ist jedoch allgemeiner.

Kindselektor[Bearbeiten]

Werden zwei Selektoren durch den Kombinator > (schließende spitze Klammer, Größer-Als-Zeichen) verbunden, z. B. E > F, so wird das Element F nur dann angesprochen, wenn es ein Kindelement eines E-Elements ist.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Kindselektor ansehen …
p > em {color: green;}
In diesem Beispiel werden alle em-Kindelemente von p in grüner Schriftfarbe dargestellt. Dies betrifft nur das Wort "Dieses", da es sich um das einzige em-Element handelt, das direkt innerhalb des Absatzelements vorkommt.
<h1> Der <em>Kind</em> selektor </h1> <p> <em>Dieses</em> Beispiel demonstriert die Wirkung des <del> <em>Nachbar</em> </del> Kindselektors. </p>
Das em-Element in der Überschrift ist überhaupt kein Kind des p-Elements. Und das em-Element innerhalb des del-Elements ist kein direktes Kind des p-Elements, sondern ein Kind des del-Elements; also sozusagen nur ein Kindeskind des p-Elements. Deshalb wird es in der normalen Schriftfarbe dargestellt.

Nachfahrenselektor[Bearbeiten]

Werden zwei Selektoren durch den Kombinator  (Leerzeichen) verbunden, z. B. E F, so wird das Element F nur dann angesprochen, wenn es ein Nachfahrenelement eines E-Elements ist. Dabei muss es kein direktes Kindelement sein, sondern kann auch weiter unten im Elementbaum notiert sein.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Das Leerzeichen (bzw. ein anderes Whitespace-Zeichen) zwischen zwei Selektoren dient nur dann als Kombinator, wenn kein anderer Kombinator vorhanden ist.

Beispiel ansehen …
p em {
   color: green;
   padding: border: 1px solid;	
   background-color: #fffbf0;
   font-style: italic; 
}
Stilfestlegung für em-Elemente, die Nachfahrenelemente von p sind.
<h2>Der <em>Nachfahren</em>selektor</h2> <p> <em>Dieses</em> Beispiel demonstriert die Wirkung des <del>Nachbar</del><ins><em>Nachfahren</em></ins>selektors. </p>
In diesem Beispiel werden die beiden em-Elemente innerhalb des Absatzes mit grüner Schriftfarbe dargestellt, da es sich bei beiden um Nachfahrenelemente des p-Elements handelt. Das em-Element innerhalb der Überschrift ist kein Nachfahre des p-Elements, es ist deshalb nicht betroffen.

Nachbarselektor[Bearbeiten]

Werden zwei Selektoren durch den Kombinator + (Pluszzeichen) verbunden, z. B. E + F, so wird das Element F nur dann angesprochen, wenn es im Elementbaum direkt auf ein E-Element folgt, also der direkte Nachbar ist.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
h1 + p { font-weight: bold }
p + p { font-style: italic }
<h1>Nachbarkombinator</h1>
<p>Erster Absatz.</p>
<p>Zweiter Absatz.</p>
<p>Dritter Absatz.</p>
<div>neutrales Element</div>
<p>Vierter Absatz</p>
In diesem Beispiel wird der erste Absatz mit fett formatierter Schrift dargestellt, denn es ist das einzige unmittelbare Nachbar-p-Element von h1.

Für den zweiten und dritten Absatz gilt: Sie sind Nachbar-p-Elemente je eines p-Elements. Sie werden also kursiv dargestellt.

Der vierte Absatz ist ein Nachbar eines neutralen div-Elements und wird nicht gestylt.
Beachten Sie: Eine Selektion des vorangehenden Elements ist nicht möglich, evtl. hilft hier die Pseudoklasse focus-within, die selektiert, wenn ein Kindelement oder Nachfahre den Fokus erhält.

lobotomized owl selector[Bearbeiten]

Der Selektor * + * wird lobotomized owl selector genannt, weil er den „Erfinder“ an eine Eule erinnerte.[1]

Er selektiert alle Elemente, denen auf der selben Ebene ein Geschwisterelement vorausgeht, also alle Elemente, die nicht das erste Kind sind.

Mithin ist er gleichbedeutend zu html :not(:first-child), aber kürzer und performanter. (Der Selektor :not(:first-child) würde auch das Wurzelelement selektieren, welches ja kein Kind ist.)

Geschwisterselektor[Bearbeiten]

Werden zwei Selektoren durch den Kombinator ~ (Tilde) verbunden, z. B. E ~ F, so werden alle F-Elemente angesprochen, die im Elementbaum in derselben Ebene auf ein E-Element folgen – unabhängig davon, ob sich zwischen den Elementen weitere, im Selektor nicht genannte, Elemente befinden.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
h1 ~ p {font-weight: bold;}
<p>Erster Absatz.</p>
<h1>Der Geschwisterselektor</h1>
<p>Zweiter Absatz.</p>
<hr>
<p>Dritter Absatz.</p>
In diesem Beispiel werden sowohl der zweite als auch der dritte Absatz mit fett formatierter Schrift dargestellt, da beide Elemente auf das h1-Element folgen. Die Trennlinie zwischen den beiden Absätzen verhindert dies nicht. Einzig der erste Absatz wird mit normaler Schrift dargestellt, da er vor dem bedingenden h1-Element steht.


Quellen[Bearbeiten]

  1. A List Apart: axiomatic css and lobotomized owls