Ο γειτονικός επιλογέας στο CSS

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

Παράδειγμα

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

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

h2 + p {
	color: red;
}

Παράδειγμα

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

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

.test + p {
	color: red;
}

Παράδειγμα

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

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