Stil mit {stil}

Mar 2009

CSS-Selektoren: Kontext-Selektor

Nachfahren-Selektoren und Nachbar-Selektoren wählen Elemente aus ihre Position innerhalb von anderen Elementen aus. Sie sind also abhängig von der Struktur, in der sie auftreten.

• Nachfahren-Selektoren oder Descendant Selectors filtern Elemente unterhalb eines bestimmten Elements
• Nachbar-Selektoren oder Adjacent Selectors filtern Elemente, die aufeinander folgen und auf derselben Ebene liegen

Kontext-Selektoren werden den Mainstream-Browsern gut unterstützt, nur IE 6 unterstützt Kind-Selektoren und Nachbar-Selektoren nicht. Erst ab IE 7 bietet auch Internet Explorer eine solide Unterstützung.

Nachfahren-Selektor (Descendant Selectors)

       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 selectors)

       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 Selectors)

       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 Klassen-Selektoren

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.