Υπο-επιλογέας στη CSS

Ας υποθέσουμε ότι έχουμε τον ακόλουθο κώδικα:

<p>
	κείμενο <b><i>έντονη πλάγια</i></b>
</p>
<p>
	κείμενο <i>απλά πλάγια</i>
</p>

Ας υποθέσουμε ότι θέλουμε να επιλέξουμε όλες τις ετικέτες i, που είναι απογόνων των παραγράφων. Ας το κάνουμε αυτό:

p i {
	color: red;
}

Αποτέλεσμα εκτέλεσης του κώδικα:

Ας επιλέξουμε τώρα τις ετικέτες i, που είναι άμεσοι απόγονοι των παραγράφων μας. Σε αυτό θα μας βοηθήσει ο υπο-επιλογέας >.

Για να κατανοήσουμε πώς να τον χρησιμοποιήσουμε, ας τον συγκρίνουμε με τον επιλογέα απογόνων. Έτσι: p i - θα επιλέξουμε όλα τα πλάγια μέσα στις παραγράφους, και έτσι: p > i - μόνο τα πλάγια, που είναι άμεσοι απόγονοι των παραγράφων.

Ας εφαρμόσουμε αυτόν τον επιλογέα στον HTML κώδικά μας:

p > i {
	color: red;
}

Αποτέλεσμα εκτέλεσης του κώδικα:

Δίνεται ο ακόλουθος κώδικας:

<ul>
	<li>
		<i>πλάγια</i>
		<b>έντονα</b>
		<b><i>έντονα πλάγια</i></b>
	</li>
	<li>
		<i>πλάγια</i>
		<b>έντονα</b>
		<b><i>έντονα πλάγια</i></b>
	</li>
</ul>

Βάψτε με κόκκινο χρώμα μόνο τις ετικέτες b, που είναι άμεσοι απόγονοι των ετικετών li.