CSS Kontext-Selektoren

CSS context selector – Nachbar-Elemente aus dem Zusammenhang oder der Umgebung

Ein Nachfahren-Selektor oder Nachbar-Selektor wählt Elemente anhand ihrer Position zu anderen Elementen aus – aus dem Kontext oder der Kombination von Elementen in der HTML-Struktur. Kontext-Selektoren sind also abhängig von der Struktur, in der sie auftreten: von ihren Nachbarn, Vorfahren und Nachfahren.

Jetzt wird's kleinlich in der Nachbarschaft:

Einfacher Nachfahrenselektor
Nachfahre (Descendant): Filtert p-Elemente, die innerhalb eines div-Elements liegen.
Komplexer Nachfahrenselektor
Nachfahre (Descendant): Filtert das jeweils letzte Element der Klasse .hangout, das innerhalb eines ul-Elements liegt, das wiederum unterhalb des main-Elements liegt.

Wir schreiben CSS-Regeln von links nach rechts, aber die Browser interpretieren CSS-Regeln von rechts nach links.

E F
Nachfahren-Selektor | Descendant
a img { border: 4 px solid orange }
Alle img-Tags, die innerhalb eines a-Tags liegen, auch in zweiter oder dritter Ebene.
E > F
Kind-Selektor | Child
div>table { border: thin dashed green; }
Alle table-Elemente, die direkt innerhalb eines div-Elements liegen.
E + F
Direkter Nachbar-Selektor | Adjacent
h5 + p { font-weight: bold }
Das p-Element, das direkt auf eine Überschrift h5 folgt.
E ~ F
Indirekter oder allgemeiner Nachbar-Selektor
h5 p { color: dimgray }
Alle p-Elemente, die der Überschrift h5 folgen und auf derselben Ebene innerhalb eines Eltern-Elements liegen ().

Parent- oder Eltern-Selektoren

Was uns fehlt, sind »Parent Selectors« – die Option, ein Element herauszufischen, das Eltern-Element eines bestimmten Kind-Elements ist. Erst Selectors Level 4 bringt E! > F.

Nachfahren-Selektor (Descendant)

div p { color: white; background-color: red; }

Die Regel springt alle p-Elemente an, die innerhalb von div-Elementen liegen.

Kind-Selektor (Child)

div > p { color: white; background-color: red; }

trifft nur auf p-Elemente zu, die direkt unterhalb des div-Elements liegen.

Der Kind-Selektor birgt allerdings eine Falle: Bei Eigenschaften, die nicht vererbt werden, funktioniert der Kind-Selektor wie erwartet, aber bei erblichen (inherit) Eigenschaften wirken sich Eigenschaften auf alle Abkömmlinge aus.

  • Ein direktes Kind von ul
  • Ein direktes Kind von ul
    • Kein direktes Kind vom obersten ul
  • Ein direktes Kind von ul
    • Kein direktes Kind vom obersten ul
  • Ein direktes Kind von ul
ul.demolist > li { text-transform: uppercase; font-size: 1.2em; opacity: 0.5; text-align: right; border-bottom: 2px solid red; margin-bottom: 1.5em; }

font-size und und text-transform sind erbliche Eigenschaft, darum wirken sie auf alle li-Elemente, nicht nur auf direkte Kind-Elemente.

border und margin sind nicht erblich und wirken nur auf direkte Kind-Elemente des oberen ul-Elements. Vererbung – Inheritance – mit Ecken und Kanten …

Direkte Nachbar-Selektoren (Adjacent)

h2 + p { color: white; background-color: red; }

Absteigender Selektor, angewendet auf ein p-Element, das dem h2-Element direkt folgt. h2 und p haben dabei immer dieselben Eltern.

Indirekte Nachbar-Selektoren

Der indirekte Nachbar-Selektor (beim W3C als Subsequent-sibling combinator bezeichnet) wird durch ein Tilde ~ angelegt (HTML-Entity ∼ wie similar, ähnlich).

Ein Subsequent Sibling Selektor spricht alle p-Elemente an, die dem h2-Element folgen. h2 und p haben dabei immer dieselben Eltern – liegen in derselben Ebene.

h2 ~ p { color: white; background-color: red; }

Beispiel für die Anwendung von indirekten Nachbar-Selektoren: CSS Akkordeon ohne Javascript.

Kombination mit class

Auch diese Kontext-Selektoren können z.B. durch Klassen- oder id-Selektoren noch weiter eingeschränkt werden.

div#nurHier p.content { color: white; background-color: green; width: 500px; }

Nur Inhalte von p-Elementen mit dem Attribut class="content", die innerhalb des div-Elements mit dem id-Attribut id="nurHier" liegen, werden den aufgeführten Regeln unterworfen.

Kontext-Selektoren und Performance

Diese Selektoren sind zwar sehr mächtig und zudem im Stylesheet gut lesbar, sie kosten aber auch Performance vom Browser.

Wir lesen einen Kontext-Selektor wie hier von links nach rechts

#content article .main p span { color: blue; }

…

<div id="content">
   <article>
      <div class="main">
         <p>Wahrscheinlich waren es <span>Stunden</span> über 
            Stunden, die …</p>
      </div>
   </article>
</div>

Wenn in #content ein article-Tag steht und darunter ein Element mit der Klasse .main in dem ein p liegt und darin ein span – dann rendere den Inhalt Blau.

Der Browser löst die Eigenschaft aber von rechts nach links auf: Der Browser sucht erst alle span-Elemente, dann filtert er die span-Elemente, die in p-Tags liegen … usw.

So elegant Kontext-Selektoren auch sind – für schnelle Reaktionszeiten sollten sie sparsam und bewußt verwendet werden.

div p { … } Selektiertes Element Kontext main ul .hangout:last-child { … } Kontext Selektiertes Element div h2 ul li p p p p p p div h2 p li p ul p