Приоритет на селекторите на потомци во 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; /* ќе се примени оваа боја */
}

Результат: