Priorité des sélecteurs descendants en CSS
Dans toutes les leçons précédentes, tous les sélecteurs devaient cibler l'élément lui-même. Il peut arriver qu'un sélecteur cible un élément, et qu'un deuxième sélecteur cible le parent de cet élément.
Vous savez déjà que si une couleur est définie pour un parent, cette couleur sera héritée par l'élément descendant. Mais, si une couleur est également définie pour le descendant, alors le sélecteur du descendant aura une priorité plus élevée que le sélecteur du parent.
Cela signifie que le sélecteur de balise du descendant l'emporte sur la classe du parent :
<div class="block">
<p>texte</p>
</div>
.block {
color: red;
}
p {
color: green; /* cette couleur sera appliquée */
}
:
Le sélecteur de balise du descendant l'emporte également sur l'identifiant du parent :
<div id="block">
<p class="text">texte</p>
</div>
#block {
color: red;
}
.text {
color: green; /* cette couleur sera appliquée */
}
:
