Προτεραιότητα επιλογέων απογόνων στο CSS

Σε όλα τα προηγούμενα μαθήματα, όλοι οι επιλογείς έπρεπε να πιάσουν το ίδιο το στοιχείο. Μπορεί να συμβεί ότι ένας επιλογέας πιάνει ένα στοιχείο, και ένας δεύτερος επιλογέας πιάνει τον γονέα αυτού του στοιχείου.

Γνωρίζετε ήδη ότι εάν σε έναν γονέα οριστεί, για παράδειγμα, ένα χρώμα, τότε αυτό το χρώμα θα κληρονομείται από τον απόγονο. Αλλά, εάν στον απόγονο έχει οριστεί επίσης χρώμα, τότε ο επιλογέας του απογόνου θα έχει μεγαλύτερη προτεραιότητα από τον επιλογέα του γονέα.

Αυτό σημαίνει ότι ο επιλογέας ετικέτας απογόνου νικά την κλάση του γονέα:

<div class="block">
	<p>κείμενο</p>
</div>

.block {
	color: red;
}
p {
	color: green; /* θα εφαρμοστεί αυτό το χρώμα */
}

Ο επιλογέας ετικέτας απογόνου νικά επίσης και το αναγνωριστικό του γονέα:

<div id="block">
	<p class="text">κείμενο</p>
</div>

#block {
	color: red;
}
.text {
	color: green; /* θα εφαρμοστεί αυτό το χρώμα */
}