Regulile de specificitate în CSS

În exemplul anterior, ambii selectori erau identici și aveau aceeași prioritate. Aceasta înseamnă că a câștigat proprietatea care a fost scrisă ma jos.

Există, de asemenea, situații în care unui element de pagină îi corespund mai mulți selectori. În acest caz, în cazul unui conflict de proprietăți, va câștiga selectorul mai specific, adică mai precis. Să analizăm regulile de specificitate.

Regula unu

O clasă întotdeauna câștigă împotriva selectorului de tip etichetă:

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

p {
	color: red;
}
.text {
	color: green; /* se va aplica această culoare */
}

Regula doi

Un identificator întotdeauna câștigă împotriva unei clase:

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

.text {
	color: red;
}
#elem {
	color: green; /* se va aplica această culoare */
}

Regula trei

În condiții egale, câștigă acel selector care are mai multe părți. De exemplu, dacă avem doi selectori de tip etichetă, atunci va câștiga cel, care are mai multe etichete:

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

p {
	color: red;
}
div p {
	color: green; /* se va aplica această culoare */
}

Dacă sunt doi selectori de clasă, atunci va câștiga cel, în care sunt specificate mai multe clase (dacă acolo vor fi selectori de tip etichetă, atunci ei nu influențează):

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

.text {
	color: red;
}
.block .text {
	color: green; /* se va aplica această culoare */
}