CSSの隣接セレクター

隣接セレクター + は、その直上の隣接要素によって要素を選択することを可能にします。

例

すべての p タグのうち、 h2 タグの直後にあるものを対象とし、それらを赤色に塗りましょう：

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

h2 + p {
	color: red;
}

例

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

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

.test + p {
	color: red;
}

例

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

<p class="test">
	テキスト
</p>
<p class="elem">
	+
</p>
<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 の直後にある要素を選択するセレクターを書いてください。

以下のコードがあります：

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

要素 .elem の直後にある要素を選択するセレクターを書いてください。