Die Geschwisterauswahl

Wir haben uns gerade angesehen, wie die "Kind" und "Descendant" (nachkommen) -Selektoren verwendet werden können, um bestimmte Kinder/Enkel eines Elements anzusprechen. Aber was ist, wenn Sie stattdessen auf Geschwister abzielen möchten? CSS hat auch einige Selektortypen dafür, und in diesem Kapitel werden wir uns den allgemeinen Geschwister-Selektor ansehen.

Mit dem allgemeinen geschwisterlichen CSS-Selektor, der einen Selektor gefolgt von einem Tilde-Zeichen (~) und dem gewünschten Selektor enthält, können Sie auf Elemente zielen, indem Sie das Vorhandensein eines anderen Elements innerhalb desselben übergeordneten Elements voraussetzen. Eine weitere Anforderung besteht darin, dass der erste Teil des Selektors VOR dem Zielelement im Markup vorhanden sein muss, auch wenn sie alle Kinder desselben übergeordneten Elements sind. Hier ist ein Beispiel, das dies demonstrieren wird:

<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>
</div>

Alle Textelemente sind also untergeordnete Elemente desselben div-Elements. Wir geben dann an, dass Absatzelemente, die einem H2-Element untergeordnet sind, kursiv gedruckt werden sollen. Wie Sie sehen können, bedeutet dies, dass die letzten beiden Absatz-Tags kursiv sind, aber nicht die ersten, da sie vor dem H2-Element im Markup stehen. Sie werden auch feststellen, dass der Sibling-Selector keine Auswirkungen auf Enkelkinder hat:

<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>
	<div>
		<p>More text here</p>
	</div>
</div>

Beachten Sie, dass der Absatz innerhalb des zweiten div-Tags nicht mehr betroffen ist, da er nicht mehr direkt mit dem H2-Element zusammenhängt.

Zusammenfassung

Mit der allgemeinen Geschwisterauswahl können Sie Elemente auf der Grundlage anderer Elemente innerhalb desselben übergeordneten/untergeordneten Bereichs auswählen. Sie werden jedoch feststellen, dass dies ein sehr breiter Satz von Elementen sein kann, je nachdem, wie viele Elemente das übergeordnete Element enthält. Mit dem Adjacent (angrenzenden) Sibling-Selektor, der im nächsten Kapitel behandelt wird, können Sie die Elemente auf die Elemente unmittelbar nach einem anderen Element beschränken.