İçerik ve sunumun birbirinden ayrıldığı modern web uygulamalarında, CSS ile içeriği şekillendirmenin ilk adımı, şekillendirilecek XHTML etiketlerin doğru bir şekilde seçilmesidir. Bu seçme işlemi CSS Seçicileri ile gerçekleştirilir. Bazı durumlarda CSS dokümanı içerisinde bir XHTML elemana ait, birden fazla seçme işlemi yapılabilir ve kural tanımlanabilir. Burada kritik olan, hangisinin tarayıcı tarafından öncelikle yorumlanacağı konusudur. Bu da CSS’de Belirlilik (Specificity) ilkesine göre belirlenir.

Örnekleyelim

Konunun net olarak anlaşılabilmesi için hızlıca örnekleyelim. Aşağıda içeriğimizi oluşturuyoruz.

<h1>Bu Bir Başlık</h1>

<div id="Content">
	<h1 class="baslik">İçerik Başlığı</h1>
    <p>İçerik Paragrafı</p>
</div>

Şimdi CSS örneğimizi oluşturalım.

h1 {color:red;}
body h1 {color:blue;}
#Content h1 {color:green;}
body div h1 {color:gray;}

Eğer örneğe buradan bakarsanız, bu haliyle ilk başlığa mavi, <div> içerisindeki ikinci başlığa ise yeşil rengin verildiğini göreceksiniz. Örnekte sizin de gördüğünüz gibi, dört farklı başlık seçimi yaptık ve her kuralda birbirinden farklı renkler kullandık. Peki, tarayıcı hangisini neye göre uyguladı? İşte CSS’de belirlilik (Specificity) burada devreye giriyor. W3C’un tavsiyesi uyarınca, oluşturulan basit bir hesap yöntemiyle, hangisinin tarayıcı tarafından uygulanacağını biliyoruz.

Seçici Belirlilik (Specificity) Hesabı

Kural şu şekilde işliyor; herhangi bir CSS seçimi yapılmamış bir etiketin belirlilik değeri [0,0,0,0] şeklindedir. Buradaki rakamlar sırasıyla [satır içi tanımlama, ID Seçici, Class Seçici, Özellik Seçiciler ve Pesudo Sınıfları , Tip Seçici ve Pseudo Elementleri] şeklindedir.

Yukarıdaki örnekte tanımladığım CSS kuralları üzerinden hesaplamamızı yaparsak;

h1 {…}  [0,0,0,1] değerindedir, sadece 1 tip seçici kullanılmıştır.
body h1 {…} [0,0,0,2] değerindedir, 2 adet tip seçici kullanılmıştır.
#Content h1 {…} [0,1,0,1] değerindedir,1 adet ID seçici ve 1 adet tip seçici kullanılmıştır.
body div h1 {…} [0,0,0,3] değerindedir, 3 adet tip seçici kullanılmıştır.

Buradaki hesap sonucunda ilk kuralımız için (0001), ikinci kuralımız için (0002), üçüncü kuralımız için (0101) ve son kuralımız için de (0003) değerine ulaşmış oluruz. Bunlar arasında bir büyüklük sırası yapıldığında #Content h1 seçiminin en yüksek specificity değerine sahip olduğun görürüz. Bu anlamda tarayıcı tarafından diğerlerine göre önceliğe sahiptir.

#Content ID’li <div> içerisinde en yüksek belirlilik değerine sahip kural (#Content h1), tarayıcı tarafından içteki <h1> etiketine uygulanmıştır.

Bu <div> dışında kalan <h1> etiketine ise h1 ve body h1 kurallarından en yüksek belirliliğe sahip olan uygulanmıştır ki; o da (0002) değerinde olan body h1 kuralıdır.

Biraz Daha Karıştıralım

h1 {color:red;} /*0001*/
body h1 {color:blue;} /*0002*/
div#Content h1 {color:brown;} /*0102*/
#Content h1 {color:green;} /*0101*/
body div h1 {color:gray;}/*0003*/

CSS koduna bir ekleme daha yaptım. Kod üzerinde gördüğünüz gibi 0102 (1 ID seçici ve 2 tip seçici)  belirlilik değerine sahip olan div#Content h1; tarayıcı tarafından öncelikli sayıldı ve başlığa kahverengi renk verildi. Buradan görebilirsiniz.

Bir tanımlama daha yapalım;

h1 {color:red;} /*0001*/
body h1 {color:blue;} /*0002*/
div#Content h1 {color:brown;} /*0102*/
#Content h1 {color:green;} /*0101*/
body div h1 {color:gray;}/*0003*/
body div#Content h1 {color:orange;} /*0103*

Kodda gördüğünüz gibi burada 0103 (1 ID seçici ve 3 adet tip seçici) değerine ulaştık. Bu yüzden #Content ID’li <div> içerisindeki <h1> etiketine turuncu renk uygulandı. Buradan görebilirsiniz.

Bu sefer de Class kullanalım;

h1 {color:red;} /*0001*/
body h1 {color:blue;} /*0002*/
body h1.baslik {color:purple;} /*0012*/
h1.baslik {color:purple;} /*0011*/
body div#Content h1 {color:orange;} /*0103*/
div#Content h1 {color:brown;} /*0102*/
#Content h1 {color:green;} /*0101*/
body div h1 {color:gray;}/*0003*/

Burada Class kullanarak iki tanımlama daha yaptık, belirlilik değerleri body div#Content h1 seçimine göre daha düşük olduklarından hala <h1> etiketini turuncu olarak görüyoruz. Buradan görebilirsiniz.

Peki, Satır İçi Stiller?

Bazı durumlarda satır içi stiller tanımlayabiliriz. Bu durumda, belirlilik  değeri [1,0,0,0] şeklinde olur ve en yüksek belirliliğe sahip olduğundan tarayıcı tarafından öncelik alır. Buradan örneği görebilirsiniz.

Ya Universal Seçici?

W3C’un tavsiyesi uyarınca * universal seçicinin belirlilik değeri [0,0,0,0] şeklindedir.

!important Dedikleri

Bu bahsettiklerim dışında bir de CSS’in bize sağladığı !important tanımlamamız var. Modern ve standart uyumlu bir tarayıcı !important tanımlamasını gördüğünde, ilgili tanımlamaya öncelik vereceklerdir. CSS Height Sorunları isimli yazımda !important kullanımının nasıl kullanıldığını görebilirsiniz. Biz burada da örnekleyelim;

h1 {color:red !important;} /*0001*/
body h1 {color:blue;} /*0002*/
body h1.baslik {color:purple;} /*0012*/
h1.baslik {color:purple;} /*0011*/
body div#Content h1 {color:orange;} /*0103*/
div#Content h1 {color:brown;} /*0102*/
#Content h1 {color:green;} /*0101*/
body div h1 {color:gray;}/*0003*/

Örnekte de görüldüğü gibi !important uygulanan ilk kuralımız, en düşük belirliliğe sahip olmasına rağmen standart uyumlu tarayıcımızda öncelik verilerek uygulanacaktır.

W3C’nin Verdiği Örnekler [a,b,c,d]

*             {}  /* a=0 b=0 c=0 d=0 -> belirlilik = 0,0,0,0 */
li            {}  /* a=0 b=0 c=0 d=1 -> belirlilik = 0,0,0,1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> belirlilik = 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> belirlilik = 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> belirlilik = 0,0,0,3 */
h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> belirlilik = 0,0,1,1 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> belirlilik = 0,0,1,3 */
li.red.level  {}  /* a=0 b=0 c=2 d=1 -> belirlilik = 0,0,2,1 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> belirlilik = 0,1,0,0 */
style=”"          /* a=1 b=0 c=0 d=0 -> belirlilik = 1,0,0,0 */

Daha Fazla Kaynak
http://www.w3.org/TR/CSS21/cascade.html#specificity
http://htmldog.com/guides/cssadvanced/specificity/
http://www.fatihhayrioglu.com/cssde-tanimlamalar-ve-etkinliklerispecificity/

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.