CSS seçicilerinin özgüllüğü hakkında ne biliyorsun…

Spesifiklik, farklı stillerin aynı elemana uygulanması durumunda CSS kurallarının önceliğini belirler. Her kuraldaki seçici için hesaplanır.

Spesifiklik, dört kategori (A, B, C, D) içeren sayısal bir değerlendirmedir ve 0,0,0,0 şeklinde yazılır. Sayı ne kadar yüksekse, spesifiklik o kadar fazladır.

Kategoriler:

A (satır içi stil): HTML öğesinde style özniteliğiyle belirlenen stiller. En yüksek spesifikliğe sahiptirler (örneğin, 1,0,0,0).
B (ID): ID seçicileri (örneğin, #benim-Id). İkinci sayıyı artırır (örneğin, 0,1,0,0).
C (Sınıf, Öznitelik, Pseudo-sınıf): Sınıf seçicileri (örneğin, .benim-sınıfım), öznitelik (örneğin, [type="text"]), pseudo-sınıf (örneğin, :hover, :first-child). Üçüncü sayıyı artırır (örneğin, 0,0,1,0).
D (Eleman, Pseudo-eleman): HTML etiketi seçicileri (örneğin, div, p) ve pseudo-elemanlar (örneğin, ::before, ::after). Dördüncü sayıyı artırır (örneğin, 0,0,0,1).

Hesaplama örneği:

p - 0,0,0,1
.benim-sınıfım - 0,0,1,0
#benim-Id - 0,1,0,0
div p - 0,0,0,2 (iki öğenin toplam spesifikliği)
#benim-Id .benim-sınıfım - 0,1,1,0 (ID ve sınıf toplamı)
div#benim-Id.benim-sınıfım:hover - 0,1,2,1 (etiket, ID, sınıf ve pseudo-sınıf toplamı)

Kurallar:

satır içi stilin spesifikliği her zaman diğer seçicilerin herhangi bir kombinasyonundan yüksektir, !important bayrağı hariç.
!important bayrağı olan kurallar en yüksek önceliğe sahiptir ve hatta satır içi stili geçersiz kılar. !important kullanımı hata ayıklama zorluğu nedeniyle önerilmez.
Aynı spesifiklikte, CSS dosyasındaki son tanımlanan kural uygulanır.
Evrensel seçici (*) ve :where() seçicileri 0,0,0,0 spesifikliğe sahiptir ve toplam spesifikliği artırmaz.

/*
  Spesifiklik: 0,0,0,1
  Daha spesifik kurallar yoksa uygulanır
*/
p {
  color: blue;
}

/*
  Spesifiklik: 0,0,1,0
  p etiketi için kuralı geçersiz kılar
*/
.text {
  color: green;
}

/*
  Spesifiklik: 0,1,0,0
  .text sınıfı için kuralı geçersiz kılar
*/
#ana-metin {
  color: red;
}

/*
  Spesifiklik: 1,0,0,0
  elementin style="color: purple;" özniteliği varsa uygulanır
*/
/* <p style="color: purple;">Metin</p> */

/*
  Çok yüksek spesifiklik, her şeyi geçersiz kılar
  Çok gerekli olmadıkça kullanılmaması önerilir
*/
.override-text {
  color: black !important;
}

CSS seçicilerinin özgüllüğü hakkında ne biliyorsun?