CSS Özgüllük Hesaplayıcı

Bu araç ne işe yarar?

CSS Özgüllük (Specificity) Hesaplayıcı, girdiğiniz her CSS seçicisinin özgüllük değerini (a, b, c) biçiminde hesaplar; ID'leri, sınıf/öznitelik/sözde-sınıfları ve element/sözde-elementleri ayrı ayrı sayar. Seçicileri özgüllük puanına göre sıralayıp çubuk grafikle karşılaştırır, böylece hangi kuralın diğerini ezeceğini bir bakışta görürsünüz. Stil çakışmalarını çözen frontend geliştiriciler için idealdir.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Özgüllük nasıl hesaplanır

Özgüllük üç sütundan oluşur: a sütunu satır içi olmayan ID seçicilerini (#header), b sütunu sınıfları (.nav), öznitelikleri ([type="text"]) ve sözde-sınıfları (:hover) sayar; c sütunu ise element (div, li) ve sözde-elementleri (::before) sayar. Örneğin #header .nav > a:hover seçicisi (1, 2, 1) değerini verir. Araç bu üçlüyü a*100 + b*10 + c formülüyle tek bir puana dönüştürerek seçicileri kolayca kıyaslamanızı sağlar.

Ne zaman işe yarar

Bir CSS kuralı beklediğiniz gibi uygulanmıyorsa, genellikle daha yüksek özgüllüğe sahip başka bir kural onu eziyordur. Çatışan seçicileri buraya yapıştırın; en yüksek puanlı olan en üstte görünür ve hangisinin kazandığını anında anlarsınız. Bu, kodunuza !important eklemeden önce sorunu teşhis etmenize, gereksiz iç içe seçicileri sadeleştirmenize ve daha sürdürülebilir, öngörülebilir stil sayfaları yazmanıza yardımcı olur.

Sıkça sorulan sorular

!important özgüllüğü etkiler mi?

Hayır, bu araç saf seçici özgüllüğünü hesaplar. !important özgüllüğün bir parçası değildir; ayrı bir katman olarak normal kuralları geçersiz kılar, bu yüzden hesaplamaya dahil edilmez.

ID'ler neden sınıflardan her zaman daha güçlü?

Çünkü a sütunu (ID'ler) b sütunundan (sınıflar) önce gelir. Bir ID seçicisi 100 puan değerindeyken on sınıf bile yalnızca 100 yapar; sıralama her zaman soldaki sütun lehine bozulur.

:not() gibi sözde-sınıflar nasıl sayılır?

Bu araç :not(), :hover gibi sözde-sınıfları b sütununda sayar. Not: gerçek tarayıcılarda :not() kendisi sayılmaz ama içindeki argüman sayılır; basit seçicilerde sonuç genelde aynıdır.