Spetsiifilisuse reeglid CSS-is

Eelmises näites olid mõlemad selektorid samad ja neil oli sama prioriteet. See tähendab, et võitis omadus, mis oli kirjutatud allpool.

Esinem ka olukordi, kus ühele lehe elemendile vastab mitu selektorit. Sellisel juhul konflikteeruvate omaduste puhul võidab joon spetsiifilisem, ehk täpsem selektor. Vaatame spetsiifilisuse reegleid.

Esimene reegel

Klass alati võidab elemendi selektori:

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

p {
	color: red;
}
.text {
	color: green; /* kohaldub see värv */
}

Teine reegel

Identifikaator alati võidab klassi:

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

.text {
	color: red;
}
#elem {
	color: green; /* kohaldub see värv */
}

Kolmas reegel

Võrdsetel tingimustel võidab see selektor, mil on rohkem osi. Näiteks kui meil on kaks elemendi selektorit, siis võidab see, mil on elemente rohkem:

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

p {
	color: red;
}
div p {
	color: green; /* kohaldub see värv */
}

Kui kaks klassi selektorit, siis võidab see, milles on märgitud rohkem klasse (kui seal on elemendi selektorid, siis need ei mõjuta):

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

.text {
	color: red;
}
.block .text {
	color: green; /* kohaldub see värv */
}