Der benachbarte Geschwister-Selektor

Im vorigen Kapitel haben wir die Geschwisterauswahl besprochen, mit der wir alle Elemente auswählen können, die auf ein anderes Element innerhalb desselben übergeordneten Elements folgen. Mit der Option angrenzende Geschwister können Sie jedoch einschränken, dass nur das erste Element direkt nach dem ersten Element im Markup enthalten ist. Dies kann etwas schwierig vorstellbar sein. Lassen Sie mich dies anhand eines Beispiels veranschaulichen:

<style type="text/css">
h2 + p {
	font-style: italic;
}
</style>

<div id="content">
	<h1>Hello, world!</h1>
	<p>Some text here</p>
	<h2>Hello, world!</h2>
	<p>Some text here</p>
	<p>More text here</p>
	<p>Even more text here</p>
	<h2>Hello, world!</h2>
	<p>Text here as well...</p>
	<p>But no more!</p>
</div>

Mit der nebenstehenden Geschwisterauswahl haben wir gerade festgelegt, dass das erste Absatzelement nach allen H2-Elementen kursiven Text verwenden soll. Wenn wir den allgemeinen Geschwister-Selektor verwendet hätten, wie wir es im vorherigen Kapitel für ein Beispiel ähnlich diesem getan haben, wären alle Absatzelemente nach dem ersten H2-Element als Ziel ausgewählt. Wie Sie sehen, ist die Syntax für den benachbarten Geschwister-Selektor genauso einfach: Die beiden Selektorteile werden einfach durch ein Pluszeichen (+) verbunden.

Natürlich können Sie mehr als nur einfache Element-Selektoren verwenden - die beiden Teile der allgemeinen UND der angrenzenden Geschwister-Selektoren können so spezifisch sein, wie Sie es möchten, und dabei alle Techniken anwenden, die wir zuvor in den verschiedenen Kapiteln über Selektoren betrachtet haben. Hier ist ein Beispiel, um meinen Standpunkt zu beweisen:

<style type="text/css">
div#content h2.main + p {
	font-style: italic;
	color: Blue;
}
</style>

<div id="content">
	<h1>Hello, world!</h1>
	<p>Some text here</p>
	<h2 class="main">Hello, world!</h2>
	<p>Some text here</p>
	<p>More text here</p>
	<h2>Hello, world!</h2>
	<p>Text here as well...</p>
</div>

Der Selektor besteht in diesem Fall einfach aus zwei Teilen, die durch das Pluszeichen getrennt sind, und Sie können in jedem der Teile so spezifisch sein, wie Sie möchten.

Zusammenfassung

Mit dem allgemeinen Geschwister-Selektor und dem angrenzenden Geschwister-Selektor können Sie Elemente auswählen, die auf dem Element basieren, das im selben übergeordneten Element vor ihnen steht. Wie wir in diesem Kapitel gesehen haben, ist der benachbarte Geschwister-Selektor etwas restriktiver, sodass Sie nur Elemente auswählen können, die direkt nach einem anderen Element stehen.