bugünki yazimda css de Specificity nedir nasil hesaplanir ona bakacagiz.
Diyelimki bir websitemiz var icinde iki ayri stil dosyamiz bulunmakta.

Dosya bir: a.css
Dosya iki: b.css

önce a.css ekleniyor html dosyamiza ardindan ise b.css

Iki dosyamizdada h1 e verilen degisik özellikler varsayalim.

a.css

h1 {
color:#569dd3;
}

b.css

h1{
color:#ff0000;
}

böyle bir cakismada en son eklenen css dosyasindaki özelligi kullanacaktir Browserler, yani b.css icindeki h1 özelliklerini.

a.css i biraz degistirelim

#anatablo h1 {
color:#569dd3;
}

Simdi ise a.css deki özellik kullanilicaktir.

Neden?

Browserler herhangi bir cakismada özel etkinlik oranini hesaplar ve en yüksek olanini kullanir.
Iki oranda ayni ise, ozaman en son eklenen kullanilir.

Browserler nasil hesapliyorlar simdi bir bakalim!

Hesaplama yi dört sütünlü bir tablo ile yapacagiz.
A,B,C,D sütünlerimiz var default olarak iclerinde 0 yaziyor.

– A en yüksek etkinligi style özellikleri veriyor, inline stil kullanmissak A sütününe 1 yaziyoruz.
– B tanimlanmis Id lerin sayisini yaziyoruz
– C tanimlanmis Sinif (+pseudoclass) larin sayisini yaziyoruz
– D secicilerin (html elemanlarinin) toplam sayisini yaziyoruz

sayilari yan yana yaziyoruz ve suna benzer bir örnek tablo cikiyor karsimiza.

simdi yukardaki bizim örnegimizi hesapliyalim ve bakalim gercekten a.css deki özelliklermi kullanilmali.

#anatablo h1 toplam sayisi 0101
b.css deki h1 in toplam sayisi 0001

101 1 den büyük oldugu icin a.css deki özellik kullaniliyor.

cakismayi asmanin kücük degisik bir yolu daha var.

hesaplamalara göre a.css yüklenecegi halde siz israrla b.css deki özelligi kullanmak istiyorsaniz !important kullanmaniz gerekir.

b.css

h1{
color:#ff0000 !important;
}

yaparsaniz kesinlikle b.css deki özellik kullanilicaktir.

kolay gelsin