Merhaba. Bu yazımda Css Specificity nedir bu konuya değineceğim. Css Specificity, browserların çakışan css stillerinde hangi stili ezip hangisini kullanacağını söyleyen bir tür puanlama sistemidir.
Bu puanlama sisteminde en çok puanı, inline style’ lar alır. Yani bir html elementine style attribute’ ünü kullanarak stil verirseniz en yüksek puanı o alacaktır. Sonrasında css dosyalarında diyez (#) işareti kullanarak tanımladığınız idler gelir. Sonrasında nokta (.) işareti kullanarak tanımladığınız class’ lar, attributeler ([type=”text”] gibi) ve pseudo-class’ lar(:focus, :hover gibi) en son olarak da elementler ve pseudo-elementler (yani :before, :after gibi) gelir.
Not:!Important yukarıda saydığım bütün css bileşenlerini geçer ve browser tarafından yorumlanır. Peki aynı elementin aynı özelliğine birden fazla yerde !important özellik verilemez mi? Verilebilir bu durumda specificity kuralları geçerlidir.
Css Specificity Nasıl Hesaplanır
Sıfırdan başlanarak inline stylelar için 1000 puan, her bir id için 100 puan, her bir class, attribute pseudo-class için 10 puan, her bir element ve pseudo element için de 1 puan verilir.
Örnek verecek olursak;
h1#title{
color: red;
}
h1.title{
color: red;
}
<h1 style="color: red"></h1>Yukarıdaki örnekte h1 1 puan, .title 10 puan ve #title 100 puandır. İlk başta h1#title 101 puan olduğu için bu kural uygulanacak sanılabilir. Ancak inline stiller 1000 puan olduğu için burada inline style geçerli olacaktır.
Aşağıda birkaç puanlama örneği paylaşıyorum.
| h1#title span#logo | 202 puan |
| a:visited | 11 puan |
| div:before | 2 puan |
| input[type=”text”] | 11 puan |
| div.page-content | 11 puan |
Specificity’ de Kurallar
1. Eşit puana sahip css tanımlarında hangisi en son tanımlanmışsa o geçerlidir.
div.page-content{color: red}
div.page-content{color:yellow}İkinci tanım uygulanacaktır ve div’ in font rengi sarı olacaktır.
2. ID selectorleri attribute selectorlerinden daha çok puana sahiptir.
img#logo{ padding-left: 20px;}
img[id="logo"]{padding-left: 0px;}İkisi de logo idsine sahip image element’ini işaret etse de birinci tanım geçerli olacaktır ve padding-left:20px olacaktır. Çünkü ikincisi attribute tanımıdır ve attribute tanımları 10 puana sahiptir.
3. Html dosyalarındaki css tanımları, css dosyalarındaki tanımlardan daha önceliklidir.
Css Dosyası
a:focus {background-color:blue;}
Html Dosyası
<style>
a:focus {background-color:green;}
</style>Html dosyasındaki geçerli olacaktır. Yani a elementinin focus daki arkaplan rengi yeşil olacaktır.
Anlatacaklarım bu kadar. Bu yazımın sonuna gelmiş bulunuyoruz. Kaynak olarak w3school’ u kullandım. Şuradan link’e ulaşabilirsiniz.
Herkese başarılar 🙂