CSS:n jälkeläisvalitsijoiden prioriteetti
Kaikissa edellisissä oppitunneissa kaikkien valitsijoiden piti napata itse elementti. On mahdollista, että yksi valitsija napistaa elementin, ja toinen valitsija napistaa kyseisen elementin vanhemman.
Tiedät jo, että jos vanhemmalle on asetettu esimerkiksi väri, niin tämä väri periytyy jälkeläiselle. Mutta, jos jälkeläiselle on myös asetettu väri, niin jälkeläisen valitsijalla on suurempi prioriteetti kuin vanhemman valitsijalla.
Tämä tarkoittaa, että jälkeläisen tagin valitsija voittaa vanhemman luokan:
<div class="block">
<p>text</p>
</div>
.block {
color: red;
}
p {
color: green; /* tämä väri sovelletaan */
}
:
Jälkeläisen tagin valitsija voittaa myös vanhemman tunnisteen:
<div id="block">
<p class="text">text</p>
</div>
#block {
color: red;
}
.text {
color: green; /* tämä väri sovelletaan */
}
:
