Επιλογέας Απογόνων και Κλάσεις στο CSS
Ας υποθέσουμε ότι έχουμε τον ακόλουθο κώδικα:
<div class="block">
<h2>Title</h2>
<p>
text
</p>
</div>
<div class="block">
<h2>Title</h2>
<p>
text
</p>
</div>
Ας επιλέξουμε όλους τους τίτλους h2 και
τις παραγράφους που βρίσκονται μέσα σε ένα στοιχείο με κλάση
block, και ας τα χρωματίσουμε με διαφορετικά χρώματα.
Θα χρησιμοποιήσουμε για αυτό τον επιλογέα απογόνων (ο οποίος είναι
το κενό μεταξύ των επιλογέων):
.block h2 {
color: red;
}
.block p {
color: green;
}
Δίνεται ο ακόλουθος κώδικας:
<p class="eee">
text <i>italic</i>
</p>
<p class="eee">
text <i>italic</i>
</p>
<div class="eee">
text <i>italic</i>
</div>
<div class="eee">
text <i>italic</i>
</div>
Χρωματίστε όλες τις ετικέτες i,
που βρίσκονται μέσα σε στοιχεία με κλάση eee, με κόκκινο χρώμα.