CSS, HTML und Javascript mit {stil}

CSS Kontext-Selektoren

CSS kontext selector

Ein Nachfahren-Selektor oder Nachbar-Selektor wählt Elemente aus ihre Position innerhalb von anderen Elementen aus – aus dem Kontext der HTML-Struktur. Sie sind also abhängig von der Struktur, in der sie auftreten.

  • Ein Nachfahren-Selektor oder Descendant Selector filtert Elemente unterhalb bestimmter Elemente
  • Ein Nachbar-Selektor oder Adjacent Selector filtert Elemente, die aufeinander folgen und auf derselben Ebene liegen
div p { … }Selektiertes ElementKontextmain ul .hangout:last-child { … }KontextSelektiertes Element
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 links nach rechts.

Kontext-Selektoren werden von allen Mainstream-Browsern unterstützt. Ab IE 7 bietet auch Internet Explorer eine solide Unterstützung.

  • Filter
    Beispiel
  • 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
    Nachbar-Selektor | Adjacent
    h5 + p { font-weight: bold }
    Das p-Element, das direkt auf eine Überschrift h5 folgt
  • E – F
    Indirekter Nachbar-Selektor
    h5 – p { font-size: smaller }
    Alle p-Elemente, die der Überschrift h5 folgen
  • 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.

    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.

    Nachfahren-Selektor (Descendant)

           div
            +
            |
       +----+----+
       |    |    |
       p    ul   p
            +
            |
            li
            +
            |
            p
    
    div p { color: white; background: red; }

    Alle p-Elemente, die innerhalb von div-Elementen liegen, werden durch die Regel angesprochen.

    Kind-Selektor (Child)

           div
            +
            |
       +----+----+
       |    |    |
       p    ul   p
            +
            |
            li
            +
            |
            p
    
    div > p { color: white; background: red; }

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

    Direkte Nachbar-Selektoren (Adjacent)

           div
            +
            |
       +----+----+
       |    |    |
       h2   p    p
    
    h2 + p { color: white; background: 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

             div
              +
              |
       +----+----+----+
       |    |    |    |
       h2   p    ul   p
                 +
                 |
                 li
                 +
                 |
                 p
    
    h2 ~ p { color: white; background: red; }

    Indirekter Nachbar-Selektor, angewendet auf alle p-Elemente, die dem h2-Element folgen. h2 und p haben dabei immer dieselben Eltern – liegen also in derselben Ebene.

    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: 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.