Сроден селектор во CSS

Сродниот селектор ~ овозможува да се изберат сите елементи кои се наоѓаат по дадениот елемент во рамки на ист родител.

Пример

Ајде да му пристапиме на сите тагови p, кои се наоѓаат по таговите h2, и да ги обоїме во црвена боја:

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

h2 ~ p {
	color: red;
}

Ајде да му пристапиме на сите тагови p, кои се наоѓаат по елементите со класа .test, и да ги обоїме во црвена боја:

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

.test ~ p {
	color: red;
}

Ајде да му пристапиме на сите елементи со класа .elem, кои се наоѓаат по елементите со класа .test, и да ги обоїме во црвена боја:

<div>
	<p class="test">
		text
	</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.