CSS/Selektoren/Kombinator/Kindselektor

Aus SELFHTML-Wiki
< CSS‎ | Selektoren‎ | Kombinator(Weitergeleitet von Kind)
Wechseln zu: Navigation, Suche

Werden zwei einfache Selektoren durch die schließende spitze Klammer, bzw. Größer-Als-Zeichen („>“) miteinander verbunden, z.B. „E > F“, so wird das Element F nur dann angesprochen, wenn es ein direktes Kindelement eines E-Elements ist.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel: Kindselektor ansehen …
<style> p > em {color: green;} </style>
In diesem Beispiel werden alle em-Kindelemente von p in grüner Schriftfarbe dargestellt. Dies betrifft nur das Wort "Dieses", da es sich um das einzige em-Element handelt, das direkt innerhalb des Absatzelements vorkommt.
<h1> Der <em>Kind</em> selektor </h1> <p> <em>Dieses</em> Beispiel demonstriert die Wirkung des <del> <em>Nachbar</em> </del> Kindselektors. </p>
Das em-Element in der Überschrift ist überhaupt kein Kind des p-Elements. Und das em-Element innerhalb des del-Elements ist kein direktes Kind des p-Elements, sondern ein Kind des del-Elements; also sozusagen nur ein Kindeskind des p-Elements. Deshalb wird es in der normalen Schriftfarbe dargestellt.

Siehe auch[Bearbeiten]