Specificitetsregler i CSS

I det foregående eksempel var begge selektorer ens og havde samme prioritet. Det betyder, at den egenskab, der blev skrevet nederst, vandt.

Der er også situationer, hvor flere selektorer matcher det samme element på siden. I dette tilfælde, ved konflikt mellem egenskaber, vil den mere specifikke, dvs. den mere præcise selektor, vinde. Lad os se på specificitetsreglerne.

Første regel

En klasse slår altid en tag-selektor:

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

p {
	color: red;
}
.text {
	color: green; /* denne farve anvendes */
}

Anden regel

Et id slår altid en klasse:

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

.text {
	color: red;
}
#elem {
	color: green; /* denne farve anvendes */
}

Tredje regel

Under lige forhold vinder den selektor, der har flest dele. For eksempel, hvis vi har to tag-selektorer, vinder den, der har flest tags:

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

p {
	color: red;
}
div p {
	color: green; /* denne farve anvendes */
}

Hvis der er to klasse-selektorer, vinder den, hvor der er angivet flest klasser (hvis der er tag-selektorer, påvirker de ikke):

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

.text {
	color: red;
}
.block .text {
	color: green; /* denne farve anvendes */
}