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

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

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

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

Результат: