CSS-Selektoren :: Kontext-Selektoren: Kind-Selektor, Nachfahrn-Selektor, Nachbar-Selektor

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.

Filter	Bezeichnung / Bschreibung	Beispiel	IE
E F	Nachfahren-Selektor \| Descendant selectors Alle F-Tags, die innerhalb eines E-Tags liegen auch in zweiter oder dritter Ebene.	`a img { border: 4 px solid orange }` Alle Bilder innerhalb von a-Tags	IE5
E > F	Kind-Selektor \| Child Selectors Alle F-Tags, die direkter Nachfahre des E-Tags sind.	`div>table { border: thin dashed green; }` Alle table-Elemente, die direkt innerhalb eines div-Elements liegen	IE 7
E + F	Nachbar-Selektor \| Adjacent Selectors Das F-Element, das unmittelbar hinter dem E-Tag folgt.	`h5 + p { font-weight: bold }` Das p-Element, das direkt auf eine Überschrift h5 folgt	IE 7
E – F	Indirkter Nachbar-Selektor Alle F-Tags, die dem E-Tag folgen.	`h5 – p { font-size: smaller }` Alle p-Elemente, die der Überschrift h5 folgen	IE 7

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.

Stil mit {stil}