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