Nasıl kullanılır?
- Bir seçiciyi Seçici kutusuna, stil sayfanızda yazdığınız gibi yazın.
- Karşılaştırmak için bir seçiciyi İkinci seçici (isteğe bağlı) kutusuna yazın ya da boş bırakın.
- İlk seçicinin Özgüllük (a, b, c) değerine, iki seçici girdiyseniz Hangi kural kazanır satırına bakın.
- Her sayının hangi parçadan geldiğini Sayılan parçalar tablosunda görün.
Üç sayı nasıl sayılır
Selectors Level 3 Önerisi bir seçiciyi üç sütunda sayar. Araç sayıları soldan sağa karşılaştırır: önce a, sonra b, sonra c. Evrensel seçici * ile > ve + gibi birleştiriciler sayılmaz.
- a, #nav gibi ID seçicilerinin sayısıdır.
- b, .active gibi sınıf seçicilerinin, [href] gibi öznitelik seçicilerinin ve :hover gibi sahte sınıfların sayısıdır.
- c, li ya da a gibi tür seçicilerinin ve ::before gibi sahte öğelerin sayısıdır.
Bağımsız değişken alan sahte sınıflar
:is(), :not() ve :has() kendi içindeki en özgül bağımsız değişken kadar sayılır; :is(#a, .b) değeri (1, 0, 0) olur. :where() hiçbir şey saymaz. :nth-child(), tek bir sahte sınıf ile "of S" listesindeki en özgül seçici kadar sayılır; :nth-child(even of li, .item) değeri (0, 2, 0) olur. Bu kurallar, bir Taslak olan Selectors Level 4 taslağından alınmıştır ve değişebilir.
Aracın yapmadıkları
- ::part(x) gibi bağımsız değişkeni olan bir sahte öğeyi tek bir sahte öğe sayar; değişkenini okumaz.
- & ile iç içe yazımı okumaz ve virgüllü bir liste yerine her kutuya tek bir seçici alır.
- Stil sayfanızı göremez. İki seçici eşit çıkarsa daha sonra gelen kuralın kazandığını söyler, sıranın nasıl olduğunu size bırakır.
Örnek: bir gezinme çubuğundaki bağlantı
İlk seçici olan #nav li.active > a:hover, bir ID (#nav) içerir. İki sınıf ve sahte sınıf (.active ve :hover) ile iki tür (li ve a) vardır. Özgüllüğü (1, 2, 2) olur. İkinci seçici olan #nav a, bir ID ve bir tür içerir; özgüllüğü (1, 0, 1) olur. a değerleri eşit olduğundan ve b ile c daha yüksek olduğundan ilk seçici kazanır.
| Seçici | a | b | c |
|---|---|---|---|
| #nav li.active > a:hover | 1 | 2 | 2 |
| #nav a | 1 | 0 | 1 |
Sık sorulan sorular
Neden bir ID ilk sütunda sayılıyor?
Araç sütunları soldan sağa karşılaştırır, bu yüzden ID sütunu a önce belirlenir. Bir ID fazla olan seçicinin a değeri daha yüksektir ve o durumda b ile c'deki sınıflar ve türler bakılmadan karar verilir.
Kuralların sırası önemli mi?
Yalnızca iki seçicinin özgüllüğü eşitse. CSS Cascade Level 4 belirtimi bu noktada belgede en son gelen bildirimin kazandığını söyler; yani daha sonraki kural geçerli olur.
Neden :not(#a) özgüllüğe ekleniyor?
:not() sahte sınıfının kendisi sayılmaz, ama bağımsız değişkeni sayılır. Selectors Level 3 örneği #s12:not(FOO) değeri (1, 0, 1) olur: #s12'den bir ID ve FOO bağımsız değişkeninden bir tür.
Evrensel seçici ve birleştiriciler bir şey ekliyor mu?
Hayır. Evrensel seçici yok sayılır; > , + ve ~ gibi birleştiriciler de öyle. Level 3 bölümündeki * örneğinin özgüllüğü (0, 0, 0)'dır.
Bu araç satır içi stilleri ve !important'ı hesaba katıyor mu?
Hayır. Araç tek bir seçiciyi sayar. Kaskad, özgüllükten önce köken ve önemi karşılaştırır; bu yüzden !important işaretli bir kural ya da satır içi bir stil, seçicilerin puanı ne olursa olsun kazanabilir. Yalnızca aynı özelliği, aynı önemle ayarlayan iki seçiciyi karşılaştırın.
Yazdığım seçici bir yere gönderiliyor mu?
Hayır. Çözümleme tarayıcınızda yapılır ve yazdığınız hiçbir şey saklanmaz ya da sunucumuza gönderilmez. Bir stil sayfasını değiştirmeden önce sonucu kontrol edin.
Kaynaklar
- W3C: Selectors Level 3, bir seçicinin özgüllüğünün hesaplanması
- W3C: Selectors Level 4 (Taslak), özgüllük kuralları
- W3C: CSS Cascade Level 4, kaskad sıralaması
Rakamlar ve metin en son 12 Kasım 2026 Perşembe tarihinde kontrol edildi.