CSS Specificity Kullanımı

CSS jargonunda “specificity” ya da Türkçe karşılığıyla “özgüllük”, bir stil kuralının hangi elementlere uygulanacağını belirlerken kullanılan bir öncelik sırasını ifade eder. Basitçe, birden fazla stil kuralının aynı elemente uygulandığı durumlarda, hangi stilin öncelik kazanacağını belirlemek için bu kavrama başvurulur.

Özgüllük değeri, bir stil kuralının “ne kadar özgül” olduğunu belirtir. Daha yüksek bir specifcity değerine sahip kurallar, daha düşük specifcity değerine sahip kurallara göre öncelik kazanır. Tabiri caizse büyük olan küçük olanı ezer.

Bu yüzden, stilize ederken hangi CSS seçicileri kullanacağımıza bu yönde bir karar vermeliyiz. Aşağıdaki tabloda CSS seçicileri ve sahip oldukları specificity değerleri gösterilmiştir:

Seçici Tipi	Specificity Değeri
Satır İçi Stiller	1000
ID Seçiciler	100
Sınıf Seçicileri	10
Element Seçicileri	1
Evrensel Seçici	0
Pseudo-class	10
Pseudo-element	1
Nitelik Seçicisi	10

Specificity, bir seçici içindeki belirli türdeki seçicilerin toplamına dayanır. Örneğin:

• Bir stil tanımında birden fazla sınıf seçicisi varsa, her bir sınıf seçicisi için specificity değeri artar..sinif1.sinif2 gibi bir seçici, specificity değerini 20 yapar (her sınıf için 10).
• Aynı şekilde, birden fazla element veya ID seçicisi de specificity değerini artırır.#id1#id2 gibi bir seçici, specificity değerini 200 yapar (her ID için 100).

Bu nedenle, bir seçici içinde birden fazla ID, sınıf veya element seçicisi kullanıldığında, bu seçicinin specificity değeri toplam olarak artar. Ancak unutulmamalıdır ki, satır içi stiller her zaman en yüksek önceliğe sahip olacaktır ve bu tür kombinasyonlar genellikle karışıklığa yol açabilir, bu nedenle hesaplama yapmaya özen gösterilmelidir.

Ayrıca belirtmek isterim ki, “Cascading” (Cascading Style Sheets) terimi stil tanımlamalarının nasıl “kademeli” bir şekilde uygulandığına işaret eder. Cascading kuralları, bir elementin hangi stil tanımlamalarını alacağını belirler.

İşte specificity tam da bu kademeli sürecin merkezinde yer alır. Bir HTML elementi için birden fazla stil tanımı varsa, tarayıcı hangi stilin uygulanacağına karar vermek için specificity değerlerini kullanır. “Bu işlemi nasıl mı yapar?” Bakınız:

1. İlk olarak, tarayıcı bir element için uygulanabilir tüm stil tanımlamalarını toplar.
2. Specificity değerlerini kullanarak bu stilleri sıralar.
3. En yüksek specificity değerine sahip stil, elemente uygulanır. Eğer iki stil tanımının specificity değeri aynıysa, CSS dosyasında hangisi sonradan tanımlanmışsa o stil uygulanır.
4. Eğer stil tanımlamaları arasında inline stil (HTML dokümanında style özelliği ile tanımlanmış stil) varsa, bu her zaman en yüksek önceliğe sahip olur, diğer tüm specificity değerlerini geçersiz kılar.

Görüleceği üzere “cascading” ve “specificity” kavramları, stil tanımlamalarının ne zaman ve nasıl bir elemente uygulanacağını belirlemek için birlikte çalışır.