CSS-də spesifiklik qaydaları

Əvvəlki nümunədə hər iki seçici eyni idi və eyni üstünlüyə malik idi. Bu o deməkdir ki, aşağıda yazılmış olan xassə qalib gəlirdi.

Həmçinin elə vəziyyətlər olur ki, səhifənin bir elementinə bir neçə seçici uyğun gəlir. Bu halda, xassələr toqquşduqda, daha spesifik, yəni daha dəqiq olan seçici qalib gələcək. Gəlin spesifiklik qaydalarını nəzərdən keçirək.

Birinci qayda

Sinif həmişə teq seçicisini məğlub edir:

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

p {
	color: red;
}
.text {
	color: green; /* bu rəng tətbiq olunacaq */
}

İkinci qayda

İdentifikator həmişə sinifi məğlub edir:

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

.text {
	color: red;
}
#elem {
	color: green; /* bu rəng tətbiq olunacaq */
}

Üçüncü qayda

Bərabər şəraitdə, hissələri daha çox olan seçici qalib gəlir. Məsələn, əgər bizim iki teq seçicimiz varsa, onda teqləri daha çox olan qalib gələcək:

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

p {
	color: red;
}
div p {
	color: green; /* bu rəng tətbiq olunacaq */
}

Əgər iki sinif seçicisi varsa, onda içində daha çox sinif göstərilən qalib gələcək (əgər orada teq seçiciləri olarsa, onlar təsir etmir):

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

.text {
	color: red;
}
.block .text {
	color: green; /* bu rəng tətbiq olunacaq */
}