Prioritet selektora potomaka u CSS

U svim prethodnim lekcijama svi selektori su morali da uhvate sam element. Može se desiti da jedan selelektor uhvati element, a drugi selektor uhvati roditelja tog elementa.

Već znate da ako je roditelju dodeljena, na primer, boja, onda će ta boja biti nasleđena od potomka. Ali, ako je i potomku dodeljena boja, onda će selektor potomka imati veći prioritet od selektora roditelja.

Ovo znači da selektor taga potomka pobedjuje klasu roditelja:

html<div class="block">
  <p>text</p>
</div>

css.block {
  color: red;
}
p {
  color: green; /* primeniće se ova boja */
}

Результат:

Selektor taga potomka takođe pobedjuje identifikator roditelja:

html<div id="block">
  <p class="text">text</p>
</div>

css#block {
  color: red;
}
.text {
  color: green; /* primeniće se ova boja */
}

Результат: