Sie befinden sich hier: » Kombinatoren » Child Combinator

Child Combinator

Mit dem Child Combinator selektiert man bestimmte Elementtypen wenn diese ineinander verschachtelt sind und dabei direkt aufeinander folgen. Auf diese Art und Weise kann man Elemente formatieren, wenn sie direkt innerhalb anderer Elemente auftreten. Anbei das Beispiel vom Type-Selector mit einer kleinen Erweiterung.

<style type="txt/css">
  p { color: red; font-size: 12px; font-weight: bold }
  span { color: green }
  p > span { color: blue; }
</style>
<span>Dieses span außerhalb des p ist wie angegeben grün</span>
<p>
  Dieser Abschnitt ist in einem &lt;p&gt; &lt;/p&gt; eingeschlossen und
  durch den oben angegeben Typ-Selektor formatiert worden.
  <span>
    Dieses &lt;span&gt; liegt innerhalb des &lt;p&gt; und wird durch den
    Descand Selector blau gefärbt
  </span>
  <div>
    <span>Dieser &lt;span&gt; wird nicht blau, da er nicht direkt im Absatz (p) liegt</span>
  </div>
</p>

so sieht es aus

Dieses span außerhalb des p ist wie angegeben grün

Dieser Abschnitt ist in einem <p> </p> eingeschlossen und durch den oben angegeben Typ-Selektor formatiert worden. Dieses <span> liegt direkt innerhalb des <p> und wird durch den Child Selector blau gefärbt.

Dieser <span> wird nicht blau, da er nicht direkt im Absatz (p) liegt

Browserunterstützung für den Descendant Kombinator

Microsoft Internet Explorer Opera Netscape Mozilla Firefox Safari Konqueror Google Chrome
5+ 5+ 4+ 1+ 0.8+ 1+ 3.5+ 2
J J J J J J J J
letzte Änderung: 13.07.2010