CSSの隣接セレクタ（全兄弟セレクタ）

隣接セレクタ（全兄弟セレクタ） ~ は、同一の親要素内で、指定された要素の後に位置する全ての要素を選択することを可能にします。

構文

セレクタ1 ~ セレクタ2 {
	
}

h2 タグの後に位置する全ての p タグにアクセスして、それらを赤色に着色してみましょう：

<div>
	<h2>text</h2>
	<p>
		+
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

クラス .test を持つ要素の後に位置する全ての p タグにアクセスして、それらを赤色に着色してみましょう：

<div>
	<p class="test">
		text
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

.test ~ p {
	color: red;
}

クラス .test を持つ要素の後に位置する全てのクラス .elem を持つ要素にアクセスして、それらを赤色に着色してみましょう：

<div>
	<p class="test">
		text
	</p>
	<p class="elem">
		+
	</p>
	<p>
		-
	</p>
	<p class="elem">
		+
	</p>
</div>
<p>
	-
</p>

.test ~ .elem {
	color: red;
}