Приоритет на селекторите за потомство в CSS

Във всички предишни уроци всички селектори трябваше да улавят самия елемент. Възможно е един селектор да улови елемент, а втори селектор да улови родителя на този елемент.

Вече знаете, че ако на родител е зададен, например, цвят, то този цвят ще се наследи от потомъка. Но, ако на потомъка също е зададен цвят, то селекторът на потомъка ще има по-висок приоритет от селектора на родителя.

Това означава, че селекторът на тага на потомъка побеждава класа на родителя:

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

.block {
	color: red;
}
p {
	color: green; /* ще се приложи този цвят */
}

Селекторът на тага на потомъка също побеждава идентификатора на родителя:

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

#block {
	color: red;
}
.text {
	color: green; /* ще се приложи този цвят */
}