CSS/Selektoren/Kombinator/Kindselektor

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Beispiel für den Kindselektor</title> <style> p > em {color: green;} </style> </head> <body> <h1>Der <em>Kind</em>selektor</h1> <p><em>Dieses</em> Beispiel demonstriert die Wirkung des <del><em>Nachbar</em></del>Kindselektors.</p> </body> </html>
In diesem Beispiel wird nur das Wort „Dieses“ in einer grünen Schriftfarbe dargestellt, da es sich um das einzige em-Element handelt, das direkt innerhalb des Absatzelements vorkommt. Die em-Elemente in der Überschrift und innerhalb des del-Elements sind keine Kinder des p-Elements und werden daher in der normalen Schriftfarbe dargestellt.