Pravidlá špecificity v CSS

V predchádzajúcom príklade boli oba selektory rovnaké a mali rovnakú prioritu. To znamená, že vyhrala tá vlastnosť, ktorá bola napísaná nižšie.

Vyskytujú sa aj situácie, keď viacerým selektorom zodpovedá jeden prvok stránky. V tomto prípade pri konflikte vlastností vyhrá špecifickejší, teda presnejší selektor. Pozrime sa na pravidlá špecificity.

Pravidlo prvé

Trieda vždy porazí selektor elementu:

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

p {
	color: red;
}
.text {
	color: green; /* použije sa táto farba */
}

Pravidlo druhé

Identifikátor vždy porazí triedu:

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

.text {
	color: red;
}
#elem {
	color: green; /* použije sa táto farba */
}

Pravidlo tretie

Pri rovnakých podmienkach vyhrá ten selektor, ktorý má viac častí. Napríklad, ak máme dva selektory elementov, vyhrá ten, ktorý má viac elementov:

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

p {
	color: red;
}
div p {
	color: green; /* použije sa táto farba */
}

Ak sú dva selektory tried, vyhrá ten, ktorý obsahuje viac tried (ak sú v nich selektory elementov, tie nemajú vplyv):

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

.text {
	color: red;
}
.block .text {
	color: green; /* použije sa táto farba */
}