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:

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

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

Pravidlo druhé

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

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

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

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

p {
	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í):

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

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