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

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

Σύνταξη

επιλογέας1 + επιλογέας2 {
	
}

Παράδειγμα

Ας απευθυνθούμε σε όλες τις ετικέτες 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;
}

Δείτε επίσης

Θυγατρικός επιλογέας,
που επιτρέπει την επιλογή στοιχείων βάσει άμεσης ένθεσης
Επιλογέας περιβάλλοντος,
που επιτρέπει την επιλογή ενός στοιχείου βάσει του γονέα του
Αδελφικός επιλογέας,
που επιτρέπει την επιλογή στοιχείων μετά από ένα δεδομένο
Καθολικός επιλογέας,
που επιτρέπει την επιλογή όλων των στοιχείων