CSS kullanırken bazen yazdığımız stillerin uygulanmadığını veya beklediğimizden farklı sonuçlar verdiğini fark ederiz. Bunun temel sebeplerinden biri, CSS’teki özgüllük (specificity) kavramıdır. Özgüllük, tarayıcının hangi CSS kuralını uygulayacağına karar vermesini sağlar. Peki, bu nasıl çalışır? Gelin, detaylıca inceleyelim.
CSS’te Özgüllük Nedir?
Bir HTML öğesine birden fazla CSS kuralı uygulanabiliyorsa, tarayıcı hangi kuralın geçerli olacağına karar vermek için özgüllüğü hesaplar. Daha spesifik olan kural, diğerlerine baskın gelir ve uygulanır.
Basit Bir Örnek
p {
color: blue;
}
p {
color: orange;
}
Yukarıdaki kodda, aynı öğeye (p) iki farklı renk uygulanmaya çalışılıyor. Burada geçerli olan kural son yazılan olur. Yani color: orange; kuralı, color: blue; kuralının üzerine yazılır ve p etiketi turuncu renkte görüntülenir.
Ancak iş farklı türde seçiciler kullanıldığında biraz daha karmaşık hale gelir. Örneğin:
a:hover {
text-decoration: underline;
}
.menu a:hover {
text-decoration: none;
}
Bu kodda, .menu sınıfı içindeki bağlantılara farklı bir stil uygulanmaya çalışılıyor. Normalde tüm bağlantılara hover olduğunda altı çizili stil verilmiş. Ancak .menu sınıfı içindeki bağlantılara altı çizgisiz stil verilmiş. Burada hangi stilin uygulanacağına tarayıcı özgüllük hesaplaması yaparak karar verir.
Özgüllük Nasıl Hesaplanır?
CSS’te özgüllük hesaplanırken üç ana bileşen dikkate alınır:
- ID Seçicileri (
#id) – En güçlü seçicidir.
- Class ve Pseudo-Class Seçicileri (
.class, :hover, [attribute]) – Orta seviyede spesifik seçicilerdir.
- Element ve Pseudo-Element Seçicileri (
h1, p, ::before) – En düşük özgüllüğe sahiptir.
Özgüllük şu şekilde puanlanır:
- ID seçicileri → 100 puan
- Class, attribute ve pseudo-class seçicileri → 10 puan
- Element ve pseudo-element seçicileri → 1 puan
Örnek Özgüllük Hesaplamaları
Aşağıdaki tabloda farklı CSS seçicilerinin özgüllük puanları verilmiştir:
| CSS Seçici | Beklenen Özgüllük Puanı |
|---|
h1 | (0,0,1) → 1 |
.container h2 | (0,1,1) → 11 |
#header h2 | (1,0,1) → 101 |
div span.highlight | (0,1,2) → 12 |
#unique | (1,0,0) → 100 |
.box1.box2.box3.box4.box5.box6.box7.box8.box9.box10 | (0,10,0) → 100 |
!important | Geçerli özgüllüğü aşar |
Burada en yüksek özgüllüğe sahip olan kural uygulanacaktır.
Bağlantılı Seçiciler ve Özgüllük
Seçiciler birbirine bağlandığında özgüllük artar. Örneğin:
span.highlight {
background-color: yellow;
}
div span.highlight {
background-color: lightgray;
}
Burada div span.highlight seçicisi daha spesifik olduğu için açık gri arka plan kazanır. Çünkü div span.highlight, hem bir element seçicisi hem de bir class seçicisi içerir.
Özgüllükle İlgili Yanılgılar
Daha fazla element eklemek özgüllüğü arttırmaz
section section section div p {
font-size: 18px;
}
Yukarıdaki gibi gereksiz uzun seçiciler yazmak, özgüllüğü pek artırmaz. Bunun yerine daha anlamlı ve etkili seçiciler kullanılmalıdır.
10 tane class seçici eklemek, 1 tane ID seçicisini geçmez
.box1.box2.box3.box4.box5.box6.box7.box8.box9.box10 {
border: 2px solid green;
}
#unique {
border: 2px solid black;
}
Burada ID seçicisi daha güçlü olduğu için öğe siyah kenarlıkla görüntülenecektir.
CSS Özgüllük Sorunlarıyla Nasıl Başa Çıkılır?
1. !important Kullanımı
Bazı durumlarda bir stilin kesinlikle uygulanmasını istiyorsanız, !important ekleyebilirsiniz.
h3 {
font-size: 24px !important;
}
Ancak !important kullanımı önerilmez! Çünkü sonradan düzenleme yaparken !important içeren bir kuralı geçersiz kılmak zor olur.
2. Daha Özgün Seçiciler Kullanma
Eğer p { color: red; } gibi bir kuralınız çalışmıyorsa, daha spesifik bir seçici kullanabilirsiniz.
.article p {
color: red;
}
Böylece sadece .article içindeki <p> öğeleri etkilenir.
3. CSS Dosya Düzeni ve Metodolojiler Kullanma
Özgüllük karmaşasını önlemek için BEM metodolojisi gibi kuralları kullanabilirsiniz.
Örnek:
.button--primary {
background-color: blue;
}
.button--secondary {
background-color: gray;
}
Bu tarz düzenli bir yapı, CSS’in karmaşasını önlemeye yardımcı olur.
4. Tarayıcı Geliştirici Araçlarını Kullanma
Eğer CSS’iniz uygulanmıyorsa, tarayıcı geliştirici araçları (Chrome DevTools, Firefox Developer Tools) ile hangi CSS kuralının geçerli olduğunu görebilirsiniz.
İpuçları:
Ctrl + Shift + I (Windows) veya Cmd + Option + I (Mac) tuşlarına basarak DevTools’u açabilirsiniz.- “Computed” sekmesine bakarak hangi stilin uygulandığını kontrol edebilirsiniz.
Sonuç
CSS’te özgüllük, hangi stilin uygulanacağını belirleyen önemli bir kuraldır.
ID seçicileri en güçlüdür, ardından class ve element seçicileri gelir.
Son yazılan kural geçerli olur, ancak daha özgün seçiciler varsa onlar kazanır.
Eğer bir CSS stiliniz uygulanmıyorsa, tarayıcı geliştirici araçlarını kullanarak hangi kuralların geçerli olduğunu kontrol edebilirsiniz.
Özgüllük kavramını iyi anlamak, CSS yazarken yaşanabilecek pek çok sorunu önlemenizi sağlar.
Şimdi pratik yapma zamanı!