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

Результат: