CSS Seçici Özgüllükleri (CSS Specificity)

HTML etiketlerine erişmek için kullanılan, CSS seçicilerinin, hiyerarşisini belirleyen kurallara “CSS specificity”, yani CSS özgüllükleri denir. Aynı etikete erişmek isteyen, birden çok seçici olması gibi durumlarda, hangi seçicinin daha baskın olacağı bu kurallar ile belirlenir. CSS özgüllük değerlerine geçmeden önce, aşağıda linkini vermiş olduğumuz, CSS seçicileri ile ilgili yazımıza göz atmanız faydalı olacaktır.

https://yazilimrehberi.com/css-secicileri/

Seçicilerin özgüllükleri, skor veya puan sistemi denilebilecek bir şekilde belirlenir. Daha yüksek puana sahip olan seçici, az olan seçiciye baskın gelir. Puanlar eşit ise CSS belgesinde altta olan, üstte olanı ezer. Aşağıdaki örnekte aynı sınıfa işaret eden iki farklı CSS bloğu vardır. Eşit özgüllük değerine sahip oldukları için altta olan değer yani “blue” geçerli olacaktır.

.box {color: red;}
.box {color: blue;}

Seçiciler, işaret ettikleri öğeyi ne kadar net tarif ediyorlarsa, özgüllük değerleri o kadar yüksek olur. Bu sebeple, evrensel seçici olan “*” seçicisi, en az özgüllük değerine sahip seçicidir ve benzersiz bir seçici olan “id” seçicisi en yüksek özgüllük değerine sahiptir. Aşağıda seçicilerin özgüllük değerleri listelenmiştir.

1000 : Satır içi stiller

<p style="color: red;">

100 : ID seçicileri

#box {color: red;}

10 : Pseudo class seçiciler

:root {color: red;}

1 : Etiket ve Pseudo element seçiciler

div {color: red;}

::first-letter {color: red;}

0 : Evrensel seçici (*), :not() seçicisi, inheritance (kalıtımsal özellikler), 

* {color: red;}

:not(div) {color: red;}

Yukarıda sıralanan özgüllük değerleri, seçicilerin birleştirilmesi ile birlikte toplanarak hesaplanır. Örneğin, bir etiket ve bir id birleşerek bir seçici oluşturursa 101 özgüllük değerine sahip olur.

Ayrıca 0 değere sahip seçiciler hakkında açıklama yapmak gerekirse; :not() bir pseudo class olmasına rağmen sıfır özgüllük değerine sahip olan bir seçicidir. Bu seçici içerisinde verilecek parametre örneğin :not(div) ise bu seçicinin özgüllük değeri 1 olur yani aldığı parametrenin özgüllük değerine sahip olur.

Inheritace yani kalıtımsal yolla edinilen CSS özelliklerinin değeri sıfırdır. Aşağıdaki örnekte özgüllük değeri yüksek olan id ile div için metin rengi tanımlaması yapılmış. Bu tanımlama kalıtım yolu ile “<p>” etiketine aktarılır. Ancak daha düşük bir özgüllük değeri olmasına rağmen “p” etiket seçicisi ile tanımlanan değer, kalıtım yolu ile aktarılan özelliği ezer. Çünkü kalıtım 0 değere sahipken, etiket seçicisi 1 değerine sahiptir. Sonuç olarak yazı rengi mavi olacaktır.

#box {color: red;}
p {color: blue;}

<div id="box">
  <p>Yazılım Rehberi</p>
</div>

CSS’in “!important” özelliği, tüm özgüllük değerlerini hiçe sayarak, istenilen özelliğin baskın olması için kullanılanılır. Aşağıdaki örnekte görüldüğü gibi, 1000 özgüllük değerine sahip satır içi css tanımlaması dahil tüm seçicileri ezebilecek baskınlıktadır. Sonuç olarak örnekteki metin rengi mavi olacaktır.

<p style="color:red;"></p>
p {color: blue !important;}

İki farklı “!important” özelliği çakıştığında hangisinin baskın çıkacağını, yine seçiciler belirler. Hangi seçicinin özgüllük değeri yüksekse, o diğerine baskın gelecektir. Özgüllük hiyerarşisinin doğal akışını bozmamak için mecbur kalınmadıkça “!important” özelliğinin kullanılmaması önerilir.

CSS seçicilerinin özgüllük değerlerini hesaplamak için “CSS Specificity Calculator” anahtar kelimesi ile ilgili araçlara ulaşabilirsiniz.

Yorum Yap