CSS'de özgüllük nedir?

CSS'de özgüllük, bir öğeye uygulanacak stil kuralını belirleyen bir mekanizmadır, eğer bu öğeye birkaç kural uygulanıyorsa.

Her seçici kendi özgüllük puanına sahiptir. Daha yüksek puan, daha yüksek öncelik anlamına gelir.

Özgüllük hesaplaması, seçicideki aşağıdaki bileşenlerin sayısına dayanır (önem sırasına göre):

Yüzler (1000): !important ile işaretlenmiş kurallar (en yüksek önceliğe sahiptir, ancak kullanımı önerilmez).
Yüzler (100): Satır içi stiller (doğrudan HTML öğesinin style özniteliğine yazılır).
Yüzler (100): Kimlikler (örneğin #benim-öğe gibi id seçiciler).
Onlar (10): Sınıflar (örneğin .sınıf), psödoklaslar (örneğin :hover, :focus), öznitelikler (örneğin [type="text"]).
Birler (1): Öğe türleri (HTML etiket isimleri, örneğin div, p), psödööğeler (örneğin ::before, ::after).
Sıfır (0): Evrensel seçici (*), birleşimciler (>, +, ~), ebeveyn seçiciler (:not(), :is(), :where()) kendi başlarına özgüllük eklemez, ancak parantez içindeki özgüllüğü etkileyebilirler.

Hesaplama örneği:

p { ... } - Özgüllük: 0-0-0-1
.benim-sınıf { ... } - Özgüllük: 0-0-1-0
#benim-id { ... } - Özgüllük: 0-1-0-0
div.benim-sınıf { ... } - Özgüllük: 0-0-1-1
ul > li.sınıf[data-id="1"] { ... } - Özgüllük: 0-0-2-2 (li, ul = 2; .sınıf, [data-id="1"] = 2)

İki kural aynı özgüllüğe sahipse, CSS dosyasında daha aşağıda olan kural uygulanır.

Örnek:

/* style.css dosyası */
.benim-öğe {
  renk: mavi; /* Özgüllük: 0-0-1-0 */
}

#öğe-id {
  renk: kırmızı; /* Özgüllük: 0-1-0-0 */
}

.benim-öğe {
  font-weight: bold; /* Özgüllük: 0-0-1-0, önceki aynı özgüllükteki kuralı geçersiz kılar */
}

Bu durumda, öğe-id kimliğine sahip öğenin metni kırmızı olacak, ve benim-öğe sınıfına sahip öğenin metni mavi ve kalın olacak (mavi, #öğe-id'nin daha yüksek özgüllüğü nedeniyle kırmızıyla üzerine yazılır).

Özgüllüğü anlamak, öngörülebilir ve bakımı kolay CSS yazmak için önemlidir. Aşırı karmaşık özgüllükten ve !important kullanımından kaçının, böylece stilleri daha iyi yönetebilirsiniz.