Επιλογέας Απογόνων στο CSS

Ας υποθέσουμε ότι έχουμε μια μη ταξινομημένη λίστα ul και μια ταξινομημένη λίστα ol:

<ul>
	<li>κείμενο</li>
	<li>κείμενο</li>
	<li>κείμενο</li>
	<li>κείμενο</li>
	<li>κείμενο</li>
</ul>
<ol>
	<li>κείμενο</li>
	<li>κείμενο</li>
	<li>κείμενο</li>
	<li>κείμενο</li>
	<li>κείμενο</li>
</ol>

Ας βάψουμε τις ετικέτες li σε αυτές τις λίστες με κόκκινο χρώμα:

li {
	color: red;
}

Τώρα ας υποθέσουμε ότι θέλουμε να βάψουμε τις ετικέτες li της λίστας ul με κόκκινο χρώμα, και τις ετικέτες li της λίστας ol - με πράσινο.

Σε αυτή την περίπτωση, ο επιλογέας απογόνων θα μας βοηθήσει. Επιτρέπει την επιλογή ετικετών βάσει του γονέα τους. Για να το κάνετε αυτό, πρέπει να καθορίσετε τον επιλογέα του γονέα, και μετά ένα κενό - τον επιλογέα του απογόνου. Στην περίπτωσή μας ο επιλογέας ul li θα επιλέξει όλες τις ετικέτες li από τη λίστα ul, ενώ ο επιλογέας ol li - θα επιλέξει όλες τις ετικέτες li από τη λίστα ol. Ας τις βάψουμε με τα αντίστοιχα χρώματα:

ul li {
	color: red;
}
ol li {
	color: green;
}

Ο επιλογέας απογόνων δεν χρειάζεται απαραίτητα να αποτελείται από δύο επιλογείς ετικετών - μπορεί να υπάρχουν οποιοσδήποτε αριθμός από αυτούς, γραμμένοι με κενό. Στον ακόλουθο κώδικα, για παράδειγμα, επιλέγονται όλες οι ετικέτες i, που βρίσκονται μέσα στην ετικέτα li, οι οποίες με τη σειρά τους βρίσκονται μέσα στην ετικέτα ul:

ul li i {
	color: red;
}

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

<ul>
	<li>κείμενο <i>πλάγια γραφή</i></li>
	<li>κείμενο <i>πλάγια γραφή</i></li>
	<li>κείμενο <i>πλάγια γραφή</i></li>
	<li>κείμενο <i>πλάγια γραφή</i></li>
</ul>

<p>
	κείμενο παραγράφου <i>πλάγια γραφή</i>
</p>
<p>
	κείμενο παραγράφου <i>πλάγια γραφή</i>
</p>

Βάψτε με κόκκινο χρώμα την πλάγια γραφή από τις ετικέτες ul, και με πράσινο χρώμα - την πλάγια γραφή από τις ετικέτες p.

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

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

Βάψτε με κόκκινο χρώμα την πλάγια γραφή, που βρίσκεται μέσα στην ετικέτα b, η οποία με τη σειρά της βρίσκεται μέσα στην ετικέτα p.