Правила за специфичност в CSS

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

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

Правило първо

Класът винаги побеждава селектора за таг:

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

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

Правило второ

Идентификаторът винаги побеждава класа:

<p id="elem" class="text">text</p>

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

Правило трето

При равни условия побеждава онзи селектор, който има повече части. Например, ако имаме два селектора за тагове, ще победи този, който има повече тагове:

<div>
	<p>text</p>
</div>

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

Ако има два селектора за класове, ще победи този, в който са указани повече класове (ако там има селектори за тагове, те не влияят):

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

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