CSS/Selektoren/Kombinator/Nachbarselektor

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

Werden zwei einfache Selektoren durch das Pluszeichen („+“) miteinander verbunden, z.B. „E + F“, so wird das Element F nur dann angesprochen, wenn es im Elementbaum direkt auf ein E-Element folgt, also der direkte Nachbar ist.

Beispiel ansehen …
<!doctype html> <html> <head> <title>Beispiel für den Nachbarselektor</title> <style> h1 + p { font-weight: bold } p + p { font-style: italic } </style> </head> <body> <h1>Der Nachbarselektor</h1> <p>Erster Absatz.</p> <p>Zweiter Absatz.</p> <p>Dritter Absatz.</p> <div>neutrales Element</div> <p>Vierter Absatz</p> </body> </html>
In diesem Beispiel wird der erste Absatz mit fett formatierter Schrift dargestellt, denn es ist das einzige unmittelbare Nachbar-p-Element von h1.

Für den zweiten und dritten Absatz gilt: Sie sind Nachbar-p-Elemente je eines p-Elements. Sie werden also kursiv dargestellt.

Der vierte Absatz ist ein Nachbar eines neutralen div-Elements und wird nicht gestylt.

siehe auch[Bearbeiten]