Pravila specifičnosti v CSS

V prejšnjem primeru sta bila oba selektorja enaka in sta imela enako prioriteto. To pomeni, da je zmagala lastnost, ki je bila napisana spodaj.

Obstajajo tudi situacije, ko elementu strani ustreza več selektorjev. V tem primeru bo ob konfliktu lastnosti zmagal bolj specifičen, torej bolj natančen selektor. Oglejmo si pravila specifičnosti.

Pravilo prvo

Razred vedno premaga selektorja oznake:

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

p {
	color: red;
}
.text {
	color: green; /* uporabljena bo ta barva */
}

Pravilo drugo

Identifikator vedno premaga razred:

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

.text {
	color: red;
}
#elem {
	color: green; /* uporabljena bo ta barva */
}

Pravilo tretje

Pod enakimi pogoji zmaga tisti selektor, ki ima več delov. Na primer, če imamo dva selektorja oznak, bo zmagal tisti, ki ima več oznak:

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

p {
	color: red;
}
div p {
	color: green; /* uporabljena bo ta barva */
}

Če sta dva selektorja razredov, bo zmagal tisti, v katerem je navedenih več razredov (če bodo tam selektorji oznak, ti ne vplivajo):

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

.text {
	color: red;
}
.block .text {
	color: green; /* uporabljena bo ta barva */
}