Specifiškumo taisyklės CSS

Ankstesniame pavyzdyje abu selektoriai buvo vienodi ir turėjo vienodą prioritetą. Tai reiškia, kad laimėjo ta savybė, kuri buvo parašyta žemiau.

Būna ir situacijų, kai vienam elementui puslapyje atitinka keli selektoriai. Tokiu atveju, esant savybių konfliktui, laimės specifiškesnis, tai yra tiksliausias selektorius. Pažvelkime į specifiškumo taisykles.

Pirmoji taisyklė

Klasis visada įveikia elemento selektorių:

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

p {
	color: red;
}
.text {
	color: green; /* bus taikoma ši spalva */
}

Antroji taisyklė

Identifikatorius visada įveikia klasę:

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

.text {
	color: red;
}
#elem {
	color: green; /* bus taikoma ši spalva */
}

Trečioji taisyklė

Esant vienodoms sąlygoms, laimi tas selektorius, kuris turi daugiau dalių. Pavyzdžiui, jei turime du elemento selektorius, laimės tas, kuris turi daugiau elementų:

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

p {
	color: red;
}
div p {
	color: green; /* bus taikoma ši spalva */
}

Jei du klasės selektoriai, laimės tas, kuriame nurodyta daugiau klasių (jei ten bus elementų selektoriai, jie įtakos neturi):

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

.text {
	color: red;
}
.block .text {
	color: green; /* bus taikoma ši spalva */
}