Pravla specificity v CSS

V předchozím příkladu byly oba selektory stejné a měly stejnou prioritu. To znamená, že vyhrála ta vlastnost, která byla napsána níže.

Existují také situace, kdy jednomu prvku stránky odpovídá několik selektorů. V tomto případě při konfliktu vlastností vyhraje specifičtější, tedy přesnější selektor. Pojďme se podívat na pravidla specificity.

Pravidlo první

Třída vždy porazí selektor tagu:

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

cssp {
  color: red;
}
.text {
  color: green; /* použije se tato barva */
}

Результат:

Pravidlo druhé

Identifikátor vždy porazí třídu:

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

css.text {
  color: red;
}
#elem {
  color: green; /* použije se tato barva */
}

Результат:

Pravidlo třetí

Při stejných podmínkách vyhraje ten selektor, který má více částí. Například, pokud máme dva selektory tagů, vyhraje ten, který má více tagů:

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

cssp {
  color: red;
}
div p {
  color: green; /* použije se tato barva */
}

Результат:

Pokud jsou dva selektory tříd, vyhraje ten, ve kterém je uvedeno více tříd (pokud tam jsou selektory tagů, tak ty neovlivňují):

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

css.text {
  color: red;
}
.block .text {
  color: green; /* použije se tato barva */
}

Результат: