Приоритет на селекторите за потомство в 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; /* ще се приложи този цвят */
}

Результат: