Priorita selektorů potomků v CSS
Ve všech předchozích lekcích všechny selektory musely zachytit samotný prvek. Může se stát, že jeden selektor zachytí prvek a druhý selektor zachytí rodiče tohoto prvku.
Už víte, že pokud je rodiči nastavena, například, barva, pak tato barva bude děděna potomkem. Ale, pokud je potomkovi také nastavena barva, pak selektor potomka bude mít vyšší prioritu než selektor rodiče.
To znamená, že selektor tagu potomka poráží třídu rodiče:
<div class="block">
<p>text</p>
</div>
.block {
color: red;
}
p {
color: green; /* použije se tato barva */
}
:
Selektor tagu potomka také poráží identifikátor rodiče:
<div id="block">
<p class="text">text</p>
</div>
#block {
color: red;
}
.text {
color: green; /* použije se tato barva */
}
:
