CSSにおける隣接兄弟セレクタ

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

例

h2 タグの後に位置する全ての p タグを対象とし、それらを赤色で塗りつぶしましょう：

<div>
	<h2>テキスト</h2>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

クラス .test を持つ要素の後に位置する全ての p タグを対象とし、それらを赤色で塗りつぶしましょう：

<div>
	<p class="test">
		テキスト
	</p>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
</div>
<p>
	---
</p>

.test ~ p {
	color: red;
}

クラス .test を持つ要素の後に位置する全てのクラス .elem を持つ要素を対象とし、それらを赤色で塗りつぶしましょう：

<div>
	<p class="test">
		テキスト
	</p>
	<p class="elem">
		+++
	</p>
	<p>
		---
	</p>
	<p class="elem">
		+++
	</p>
</div>
<p>
	---
</p>

.test ~ .elem {
	color: red;
}

以下のコードが与えられています：

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li id="elem">5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

要素 #elem の直後に位置する全ての要素を選択するセレクタを記述してください。