Specificitetsregler i CSS

I föregående exempel var båda selektorerna lika och hade samma prioritet. Det betyder att egenskapen som skrevs sist vann.

Det finns också situationer där ett element på sidan matchar flera selektorer. I detta fall, vid konflikt mellan egenskaper, vinner den mer specifika, det vill säga den mer exakta selektorn. Låt oss titta på specificitetsreglerna.

Första regeln

En klass vinner alltid över en taggselektor:

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

p {
	color: red;
}
.text {
	color: green; /* denna färg appliceras */
}

Andra regeln

Ett ID vinner alltid över en klass:

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

.text {
	color: red;
}
#elem {
	color: green; /* denna färg appliceras */
}

Tredje regeln

Vid lika förutsättningar vinner den selektor som har flera delar. Till exempel, om vi har två taggselektorer, vinner den som har fler taggar:

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

p {
	color: red;
}
div p {
	color: green; /* denna färg appliceras */
}

Om det är två klassselektorer, vinner den som har fler klasser angivna (om det finns taggselektorer där påverkar de inte):

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

.text {
	color: red;
}
.block .text {
	color: green; /* denna färg appliceras */
}