CSS-ի սպեցիֆիկության կանոններ

Նախորդ օրինակում երկու ընտրողներն էլ նույնն էին և ունեին նույն առաջնահերթությունը: Սա նշանակում է, որ հաղթում էր այն հատկությունը, որը գրված էր ներքևում:

Լինում են նաև իրավիճակներ, երբ էջի մեկ տարրին համապատասխանում են մի քանի ընտրողներ: Այս դեպքում հատկությունների հակասության դեպքում կհաղթի ավելի սպեցիֆիկ, այսինքն՝ ավելի ճշգրիտ ընտրողը: Եկեք դիտարկենք սպեցիֆիկության կանոնները:

Առաջին կանոն

Դասը միշտ հաղթում է տեգի ընտրողին:

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

p {
	color: red;
}
.text {
	color: green; /* կկիրառվի այս գույնը */
}

Երկրորդ կանոն

Նույնականացուցիչը միշտ հաղթում է դասին:

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

.text {
	color: red;
}
#elem {
	color: green; /* կկիրառվի այս գույնը */
}

Երրորդ կանոն

Հավասար պայմաններում հաղթում է այն ընտրողը, որը ունի ավելի շատ մասեր: Օրինակ, եթե մենք ունենք երկու տեգի ընտրող, ապա կհաղթի այն մեկը, որը ունի ավելի շատ տեգեր:

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

p {
	color: red;
}
div p {
	color: green; /* կկիրառվի այս գույնը */
}

Եթե երկու դասի ընտրողներ են, ապա կհաղթի այն մեկը, որում նշված է ավելի շատ դասեր (եթե այնտեղ կան տեգի ընտրողներ, ապա դրանք ազդեցություն չունեն):

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

.text {
	color: red;
}
.block .text {
	color: green; /* կկիրառվի այս գույնը */
}