Παιδικός επιλογέας στο CSS

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

Σύνταξη

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

Παράδειγμα

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

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

p > b {
	color: red;
}

Παράδειγμα

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

<p class="block">
	κείμενο <b>+</b>
</p>
<p class="block">
	κείμενο <i><b>-</b></i>
</p>
<p>
	κείμενο <b>-</b>
</p>

.block > b {
	color: red;
}

Παράδειγμα

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

<p class="block">
	κείμενο <span class="elem">+</span>
</p>
<p class="block">
	κείμενο <i><span class="elem">-</span></i>
</p>
<p class="block">
	κείμενο <span>-</span>
</p>
<p>
	κείμενο <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

Δείτε επίσης

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