Specifitātes noteikumi CSS

Iepriekšējā piemērā abi selektori bija vienādi un tiem bija vienāda prioritāte. Tas nozīmē, ka uzvarēja tā īpašība, kas bija uzrakstīta zemāk.

Ir arī situācijas, kad vienu lapas elementu atbilst vairāki selektori. Šajā gadījumā, kad īpašības ir konfliktā, uzvarēs specifiskāks, tas ir, precīzāks selektors. Apskatīsim specifitātes noteikumus.

Pirmais noteikums

Klase vienmēr uzvar elementa selektoru:

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

p {
	color: red;
}
.text {
	color: green; /* piemērosies šī krāsa */
}

Otrais noteikums

Identifikators vienmēr uzvar klasi:

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

.text {
	color: red;
}
#elem {
	color: green; /* piemērosies šī krāsa */
}

Trešais noteikums

Pie vienādiem nosacījumiem uzvar tas selektors, kuram ir vairāk daļu. Piemēram, ja mums ir divi elementu selektori, tad uzvarēs tas, kurā ir vairāk elementu:

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

p {
	color: red;
}
div p {
	color: green; /* piemērosies šī krāsa */
}

Ja divi klases selektori, tad uzvarēs tas, kurā norādītas vairāk klases (ja tajos būs elementu selektori, tie neietekmē):

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

.text {
	color: red;
}
.block .text {
	color: green; /* piemērosies šī krāsa */
}