Spesifisitetsregler i CSS

I forrige eksempel var begge velgerne like og hadde samme prioritet. Dette betyr at egenskapen som ble skrevet nederst vant.

Det er også situasjoner der flere velgere korresponderer med ett element på siden. I dette tilfellet, ved konflikt mellom egenskaper, vil den mer spesifikke, det vil si den mer presise velgeren, vinne. La oss se på spesifisitetsreglene.

Første regel

En klasse vinner alltid over en tagg-velger:

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

p {
	color: red;
}
.text {
	color: green; /* denne fargen vil bli brukt */
}

Andre regel

En identifikator vinner alltid over en klasse:

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

.text {
	color: red;
}
#elem {
	color: green; /* denne fargen vil bli brukt */
}

Tredje regel

Under like forhold vinner den velgeren som har flest deler. For eksempel, hvis vi har to tagg-velgere, vil den med flest tagger vinne:

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

p {
	color: red;
}
div p {
	color: green; /* denne fargen vil bli brukt */
}

Hvis det er to klassevelgere, vinner den som har flest klasser spesifisert (hvis de inneholder tagg-velgere, har de ikke noe å si):

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

.text {
	color: red;
}
.block .text {
	color: green; /* denne fargen vil bli brukt */
}