Ο Αδελφικός Επιλογέας στην CSS

Ο αδελφικός επιλογέας ~ επιτρέπει την επιλογή όλων των στοιχείων που βρίσκονται μετά από ένα δεδομένο στοιχείο εντός του ίδιου γονέα.

Παράδειγμα

Ας απευθυνθούμε σε όλες τις ετικέτες p, που βρίσκονται μετά από τις ετικέτες h2, και ας τις χρωματίσουμε με κόκκινο χρώμα:

<div>
	<h2>κείμενο</h2>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

Παράδειγμα

Ας απευθυνθούμε σε όλες τις ετικέτες p, που βρίσκονται μετά από στοιχεία με την κλάση .test, και ας τις χρωματίσουμε με κόκκινο χρώμα:

<div>
	<p class="test">
		κείμενο
	</p>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
</div>
<p>
	---
</p>

.test ~ p {
	color: red;
}

Παράδειγμα

Ας απευθυνθούμε σε όλα τα στοιχεία με την κλάση .elem, που βρίσκονται μετά από στοιχεία με την κλάση .test, και ας τα χρωματίσουμε με κόκκινο χρώμα:

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