CSS/Selektoren/Kombinator/Nachbarselektor
Aus SELFHTML-Wiki
< CSS | Selektoren | Kombinator
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
So sieht's aus
<!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>
Beachten Sie: Im Internet Explorer 7 werden HTML-Kommentare als Element erkannt, daher verliert dieser Selektor seine Wirkung, wenn im Quelltext zwischen dem Bedingungs- und dem Zielelement ein Kommentar vorhanden ist.
p-Element vonh1.Für den zweiten und dritten Absatz gilt: Sie sind Nachbar-
Der vierte Absatz ist ein Nachbar eines neutralen div-Elements und wird nicht gestylt.p-elemente einesp-Elements. Sie werden also kursiv dargestellt.