Приоритет селектора потомака у CSS-у

У свим претходним лекцијама сви селектори требало је да "ухвате" сам елемент. Може се десити да један селектор ухвати елемент, а други селектор ухвати родитеља тог елемента.

Већ знате да ако се родитељу зада, на пример, боја, тада ће се та боја наследити на потомка. Али, ако се и потомку такође зада боја, онда ће селектор потомка имати већи приоритет од селектора родитеља.

То значи да селектор тага потомка побеђује класу родитеља:

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

css.block {
  color: red;
}
p {
  color: green; /* примениће се ова боја */
}

Результат:

Селектор тага потомка такође побеђује идентификатор родитеља:

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

css#block {
  color: red;
}
.text {
  color: green; /* примениће се ова боја */
}

Результат: