CSS'te Özgüllük Kuralları

Önceki örnekte her iki seçici de aynıydı ve aynı önceliğe sahipti. Bu, aşağıya yazılan özelliğin kazandığı anlamına gelir.

Ayrıca, bir sayfa öğesine birden fazla seçicinin karşılık geldiği durumlar da vardır. Bu durumda, çakışan özelliklerde daha özgül, yani daha kesin olan seçici kazanır. Haydi özgüllük kurallarını inceleyelim.

Birinci Kural

Bir sınıf her zaman etiket seçiciyi yener:

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

p {
	color: red;
}
.text {
	color: green; /* bu renk uygulanacak */
}

İkinci Kural

Bir kimlik her zaman sınıfı yener:

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

.text {
	color: red;
}
#elem {
	color: green; /* bu renk uygulanacak */
}

Üçüncü Kural

Eşit koşullar altında, daha fazla parçaya sahip olan seçici kazanır. Örneğin, eğer iki etiket seçicimiz varsa, içinde daha fazla etiket bulunan kazanır:

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

p {
	color: red;
}
div p {
	color: green; /* bu renk uygulanacak */
}

Eğer iki sınıf seçicisi varsa, içinde daha fazla sınıf belirtilen kazanır (eğer orada etiket seçiciler varsa, onlar etkilemez):

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

.text {
	color: red;
}
.block .text {
	color: green; /* bu renk uygulanacak */
}