Pravila specifičnosti u CSS-u

U prethodnom primeru oba selektora su bila identična i imala su isti prioritet. To znači da je pobedilo ono svojstvo koje je napisano niže.

Postoje takođe situacije kada jedan element stranice odgovara više selektora. U ovom slučaju, ukoliko postoji konflikt svojstava, pobediće specifičniji, odnosno precizniji selektor. Hajde da pogledamo pravila specifičnosti.

Prvo pravilo

Klasa uvek pobedjuje selektor taga:

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

p {
	color: red;
}
.text {
	color: green; /* primeniće se ova boja */
}

Drugo pravilo

Identifikator uvek pobedjuje klasu:

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

.text {
	color: red;
}
#elem {
	color: green; /* primeniće se ova boja */
}

Treće pravilo

Pod jednakim uslovima, pobedjuje onaj selektor koji ima više delova. Na primer, ako imamo dva selektora taga, pobediće onaj koji ima više tagova:

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

p {
	color: red;
}
div p {
	color: green; /* primeniće se ova boja */
}

Ako su dva selektora klasa, pobediće onaj koji ima navedeno više klasa (ukoliko tu imaju selektori tagova, oni ne utiču):

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

.text {
	color: red;
}
.block .text {
	color: green; /* primeniće se ova boja */
}