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:

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

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

Результат:

Pravidlo druhé

Identifikátor vždy porazí triedu:

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

css.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:

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

cssp {
  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):

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

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

Результат: