Sınıflar ve kimlikler (ID) arasındaki farkları biliyor musun?

HTML'de öğeleri seçmek ve stil veya script uygulamak için class ve id seçicileri kullanılır.

Ana farklar:

• Benzersizlik:
  • id tüm HTML sayfasında benzersiz olmalıdır. Her öğe yalnızca bir id alabilir ve sayfada aynı id'ye sahip iki öğe olmamalıdır.
  • class sayfada birden çok kez kullanılabilir. Birden fazla öğe aynı class'a sahip olabilir ve bir öğe birden fazla sınıfa sahip olabilir.
• Özellik:
  • id, class ile karşılaştırıldığında stil uygulamada daha yüksek özgüllüğe (ağırlık) sahiptir. id ile belirlenen stil, class veya etiketle belirlenen stilden önceliklidir, daha özgüllü kurallar yoksa.
  • class, id'den daha düşük özgüllüğe sahiptir, ancak etiket seçicilerinden yüksektir.
• JavaScript'te Kullanım:
  • id, document.getElementById() kullanılarak DOM'dan benzersiz bir öğe almak için sıkça kullanılır ve hızlı erişim sağlar.
  • class, genellikle document.getElementsByClassName() veya document.querySelectorAll() kullanılarak öğe gruplarını seçmek için kullanılır.

Örnek:

HTML:

<div id="unique-element" class="styled-box">
  Benzersiz öğe
</div>
<div class="styled-box">
  Grup içindeki ilk öğe
</div>
<div class="styled-box highlight">
  Grup içindeki ikinci öğe (ekstra sınıf ile)
</div>

CSS:

#unique-element {
  /* Yüksek öncelikli benzersiz öğe stili */
  color: red;
}

.styled-box {
  /* Grup öğeleri için stil */
  border: 1px solid blue;
  padding: 10px;
}

.highlight {
  /* Bazı öğeler için ek stil */
  background-color: yellow;
}

Karşılaştırma tablosu:

Özellik	ID (Tanımlayıcı)	Class (Sınıf)
Benzersizlik	Sayfa genelinde benzersiz	Birden çok kez kullanılabilir
Uygulama	Bir öğe yalnızca bir ID alabilir	Bir öğe birden çok sınıfa sahip olabilir
Özellik	Yüksek	Orta
JS'de Kullanım	getElementById()	getElementsByClassName(), querySelectorAll()
Amacı	Benzersiz öğeyi tanımlama	Öğeleri ortak özelliklere göre gruplama

id ve class'ın doğru kullanımı, kodun düzenlenmesi, temiz stilin korunması ve scriptlerle verimli çalışma açısından önemlidir. id'yi gerçekten benzersiz öğeler için az kullanmak, class'ı ise birden çok öğeye uygulanabilen stiller veya öğeleri gruplamak için kullanmak en iyisidir.