Hangi Kural Kazanır?

Bu dersin sonunda aynı elemana birden çok kural uygulandığında hangisinin kazanacağını hesaplayabilecek ve “CSS’im neden çalışmıyor?” sorusunu kendiniz çözebileceksiniz.

Sorun

Aşağıdaki paragrafa üç kural aynı anda uygulanıyor ve üçü de farklı bir renk istiyor. Tarayıcı bir tanesini seçmek zorunda.

<p id="ozel" class="not">Ben hangi renkteyim?</p>

#ozel {
  color: blue;
}

.not {
  color: green;
}

p {
  color: red;
}

p kuralı en sonda yazılmış olmasına rağmen yazı mavi. CSS’in adındaki cascade (basamaklı akış), bu kararı veren kurallar dizisidir.

Tarayıcı sırayla şu soruları sorar ve bir kazanan çıktığı anda durur:

1. Önem: Birinde !important var mı?
2. Özgüllük: Hangi seçici daha özgül?
3. Sıra: Hangisi daha sonra yazılmış?

Özgüllük

Özgüllük bir seçicinin ne kadar belirgin olduğunu ölçer. Üç sütunlu bir puan gibi düşünün:

Boşluk, >, +, ~, , ve * puan getirmez.

Puanlar soldan sağa, sütun sütun karşılaştırılır. Soldaki sütunda farklılık varsa diğerlerine bakılmaz. Bu yüzden on bir sınıf bile tek bir id seçicisini yenemez.

<div class="kart">
  <a class="link" href="#">Bu bağlantı ne renk?</a>
</div>

.kart .link {
  color: crimson;
}

a.link {
  color: teal;
}

a {
  color: gold;
}

.kart .link puanı 0, 2, 0 olduğu için 0, 1, 1 puanlı a.link kuralını yener.

Eşitlikte sıra

Özgüllükler eşitse sonra yazılan kazanır. Stil dosyasındaki düzen bu yüzden önemlidir.

<p class="a b">İki sınıf, aynı puan</p>

.a {
  color: teal;
}

.b {
  color: crimson;
}

HTML’deki sınıfların sırası önemli değildir. class="b a" yazsanız da sonuç değişmez. Önemli olan CSS dosyasındaki sıradır.

style niteliği ve !important

style niteliği bütün seçicilerin önüne geçer. HTML bölümünde bu yüzden her zaman çalışıyordu.

Bir bildirimin sonuna !important yazarsanız o bildirim normal bildirimlerin hepsini, hatta style niteliğini de yener.

<p style="color: blue;">Satır içi mavi ama yeşil görünüyor</p>

p {
  color: green !important;
}

!important kolay bir çözüm gibi görünür ama bir kez kullanıldığında onu yenmek için yine !important gerekir ve dosya hızla yönetilemez hâle gelir. Önce seçicilerinizi düzeltin. Kendi sitenizde neredeyse hiç ihtiyacınız olmaz.

Kalıtım her zaman kaybeder

Kalıtımla gelen bir değerin özgüllüğü yoktur. Elemanı doğrudan hedefleyen en zayıf kural bile kalıtımı yener.

<div id="kutu">
  <p>Bu paragraf neden yeşil?</p>
</div>

#kutu {
  color: crimson;
}

p {
  color: green;
}

#kutu çok güçlü bir seçici ama paragrafı değil, kutuyu hedefliyor. Paragraf rengi yalnızca miras alır. p kuralı ise paragrafı doğrudan hedeflediği için kazanır.

Kalıtımı kendiniz yönetmek için üç özel değer vardır:

• inherit Değeri dıştaki elemandan al.
• initial CSS’in başlangıç değerine dön.
• unset Kalıtılan bir özellikse miras al, değilse başlangıç değerine dön.

Geliştirici araçlarıyla bulmak

Bir kural çalışmıyorsa elemana sağ tıklayıp İncele seçeneğini seçin. Styles bölümü kuralları kazanma sırasına göre listeler.

• Üzeri çizili bildirim, başka bir kurala kaybetmiştir.
• Yanında sarı üçgen olan bildirim geçersizdir.
• Kuralınız listede hiç yoksa seçiciniz o elemana uymuyordur.

Bu üç ihtimal, CSS sorunlarının çok büyük bölümünü açıklar.

<style>
  .uyari {
    color: crimson;
  }

  .onemli {
    color: navy;
  }
</style>

<p class="uyari onemli">Dikkat</p>

<style>
  .kutu {
    color: crimson;
  }

  .kutu p {
    color: teal;
  }
</style>

<div class="kutu">
  <p>Merhaba</p>
</div>

Bu derste öğrendikleriniz

• Tarayıcı önce önemi, sonra özgüllüğü, sonra sırayı karşılaştırır.
• Özgüllük id, sınıf ve etiket sütunlarıyla soldan sağa karşılaştırılır.
• !important son çaredir, kalıtım ise doğrudan yazılan her kurala kaybeder.
• Geliştirici araçlarının Styles bölümü hangi kuralın neden kazandığını gösterir.