Yükleniyor...

CSS Özgüllük

Seçici yazmayı biliyorsunuz. Gerçek stillerde kurallar çarpışır: iki kural aynı öğeyi ve aynı özelliği hedefler. Tarayıcı rastgele seçmez — özgüllüğe (specificity) bakar; ağırlık eşitse dosyadaki sıraya.

Özgüllük ne demek?

Özgüllük, tarayıcının seçiciye verdiği ağırlıktır. Çatışmada o özellik için daha ağır seçici kazanır. Günlük iş için şu merdiveni ezberleyin: satır içi stil > id > class (ve öznitelik / pseudo-sınıf) > element (ve pseudo-öğe). * ve birleştiriciler tek başına ağırlık eklemez.

Sıralama bir bakışta

Önce bu sırayı öğrenin. Daha fazla ayrıntı var ama çoğu yeni başlayan çıkmazı bu merdivenle çözülür.

📊 CSS özgüllük sıralaması (günlük)

Tür Örnekler Genelde yenilgiye uğratır
Satır içi stil style="color: red" Stil sayfasındaki neredeyse her şey
Id #hero, #nav Class ve elementler
Class / öznitelik / pseudo-sınıf .card, [type="email"], :hover Element seçicileri
Element / pseudo-öğe p, h1, ::before Yalnızca daha zayıf veya eşit kurallar (sonra kaynak sırası)

class, element’ten güçlüdür

Etiket seçicisi geniştir. Class daha kesindir — class rengi kazanır. Sıra yalnızca ağırlıklar eşitken önemlidir.

class, element’i yener

css
CSS Code 
p {
color: #334155;
}

.note {
color: #0f766e;
}

Çatışmayı nasıl okuruz?

<p class="note"> için ikisi de uyar. .note class’tır; p element. Class kazanır → teal metin.

id, class’tan güçlüdür

Id, class’tan daha ağırdır. Yeniden kullanılabilir görünüm için class tercih edin; id’yi benzersiz kanca için saklayın.

id, class’ı yener

css
CSS Code 
.note {
color: #0f766e;
}

#title {
color: #9f1239;
}

Neden önemli?

<h1 id="title" class="note"> bordo olursa id kazandı — «önemli hissetmekten» değil, daha yüksek ağırlıktan.

Eşit ağırlık → sonraki kural kazanır

İki kuralın özgüllüğü aynıysa, o özellik için CSS’te daha sonra gelen kazanır.

Aynı ağırlık — kaynak sırası karar verir

css
CSS Code 
.card {
border-color: #cbd5e1;
}

.card {
border-color: #0f766e;
}

Beraberlikte alışkanlık

Her iki seçici de bir class. İkinci .card kuralı kazanır → teal kenarlık. İlk rengi istiyorsanız daha güçlü bir seçicinin de uymadığını kontrol edin.

Birleşik seçiciler pratikte

Seçiciler birleşir: nav a.button:hover, yalnız a’dan daha güçlüdür çünkü class ve pseudo-sınıf ekler. Her satırda hesap makinesi gerekmez — sorun: «Id var mı? Ekstra class? Yoksa yalnızca etiketler?»

Birleşik seçici çıplak element’i yener

css
CSS Code 
a {
color: #334155;
}

nav a.button {
color: #0f766e;
}

!important hakkında

!important normal özgüllüğü aşabilir. Yangın söndürücü, günlük alet değil. Aşırı kullanım sonraki değişiklikleri zorlaştırır. Önce yapı ve daha net seçiciler.

İyi alışkanlıklar

  • Görünüm için class; id benzersiz kanca için
  • Takıldınız mı? Her seçici merdivenin hangi basamağında?
  • Eşit ağırlık → dosyada sonraki kurala bakın
  • Yalnızca «kazanmak» için uzun zincir kurmayın — HTML değişince kırılır
  • !important’i sona bırakın, başa değil

Kendiniz deneyin

  1. Sayfa: <p class="note">Merhaba</p>, <h1 id="title" class="note">Başlık</h1> ve <nav> içinde <a class="button">Git</a>.
  2. Element–class çifti (p gri, .note teal) — note paragrafı teal olsun.
  3. #title { color: #9f1239; } ekleyin — .note’a rağmen başlık bordo.
  4. İki .card kuralı border-color için — ikincisi kazansın.
  5. İsteğe bağlı: nav bağlantısında a { … } ile nav a.button { … } karşılaştırın.

Sık hatalar

  • «Daha fazla bildirim» özgüllüğü artırır sanmak — artırmaz
  • Son dosyanın her zaman id’yi yendiğini varsaymak — daha yüksek ağırlık hâlâ kazanır
  • #herşey veya !important’i varsayılan çözüm yapmak
  • Basamakları karıştırmak (class’ı element gibi görmek)
  • Eşit ağırlığın kaynak sırasına döndüğünü unutmak

Özet

  • Özgüllük aynı özellikteki çatışmayı çözer
  • Günlük merdiven: inline > id > class/öznitelik/pseudo-sınıf > element/pseudo-öğe
  • Eşit ağırlık → sonraki kural
  • Görünüm için class; id ve !important seyrek
  • Önce basamak, sonra sıra
  • Kazanan açık olana kadar p / .note / #title ile pratik yapın

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders