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

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

Σύνταξη

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

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

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