Selectorul frate în CSS

Selectorul frate ~ vă permite să selectați toate elementele care se află după un element dat în același părinte.

Exemplu

Să ne adresăm tuturor tagurilor p, care se află după tagurile h2, și să le colorăm în roșu:

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

h2 ~ p {
	color: red;
}

Să ne adresăm tuturor tagurilor p, care se află după elementele cu clasa .test, și să le colorăm în roșu:

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

.test ~ p {
	color: red;
}

Să ne adresăm tuturor elementelor cu clasa .elem, care se află după elementele cu clasa .test, și să le colorăm în roșu:

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

.test ~ .elem {
	color: red;
}

Este dat codul:

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

Scrieți un selector care va selecta toate elementele, care se află imediat după elementul #elem.