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