CSSda Spesifiklik Qoidalari

Oldingi misolda ikkala selektor ham bir xil edi va bir xil ustuvorlikka ega edi. Bu shuni anglatadiki, quyida yozilgan xususiyat g'alaba qozongan.

Sahifadagi bir element bir nechta selektorga mos keladigan vaziyatlar ham bo'ladi. Bunday holda, qarama-qarshi xususiyatlar bo'lsa, g'alaba ko'proq spesifik, ya'ni aniqroq selektorga tegishli bo'ladi. Keling, spesifiklik qoidalarini ko'rib chiqaylik.

Birinchi qoida

Class har doim teg selektoridan ustun keladi:

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

p {
	color: red;
}
.text {
	color: green; /* shu rang qo'llaniladi */
}

Ikkinchi qoida

Identifikator har doim classdan ustun keladi:

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

.text {
	color: red;
}
#elem {
	color: green; /* shu rang qo'llaniladi */
}

Uchinchi qoida

Teng sharoitda, qismlari ko'proq bo'lgan selektor g'alaba qozonadi. Masalan, agar bizda ikkita teg selektori bo'lsa, unda teglari ko'proq bo'lgan selektor g'alaba qozonadi:

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

p {
	color: red;
}
div p {
	color: green; /* shu rang qo'llaniladi */
}

Agar ikkita class selektori bo'lsa, unda ko'proq class ko'rsatilgan selektor g'alaba qozonadi (agar ularning ichida teg selektorlari bo'lsa, ular ta'sir qilmaydi):

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

.text {
	color: red;
}
.block .text {
	color: green; /* shu rang qo'llaniladi */
}