Правила специфичности в 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; /* применится этот цвет */
}

Результат: