Kokias skirtumus žinote tarp klasių ir identifikatorių (ID)?

Pasirinkimo class ir id naudojami HTML elementų pasirinkimui ir jų stilių ar skriptų taikymui.

Pagrindiniai skirtumai:

• Unikalumas:
  • id turi būti unikalus visame HTML puslapyje. Kiekvienas elementas gali turėti tik vieną id, ir puslapyje neturi būti dviejų elementų su tokiu pačiu id.
  • class gali būti naudojamas kartotinai viename puslapyje. Keletas elementų gali turėti tą patį class, ir vienas elementas gali turėti kelias klases.
• Specifiškumas:
  • id turi aukštesnį specififiškumą (svorį) taikant stilių, palyginti su class. Stilius, nustatytas per id, turės pirmenybę prieš class ar žymės stilių, jei nėra specifinių taisyklių.
  • class turi žemesnį specififiškumą nei id, bet aukštesnį nei žymės selektoriai.
• Naudojimas JavaScript:
  • id dažnai naudojamas norint gauti unikalų elementą iš DOM naudojant document.getElementById(), tai yra greitas būdas pasiekti elementą.
  • class dažniau naudojamas elementų grupių pasirinkimui naudojant document.getElementsByClassName() arba document.querySelectorAll().

Pavyzdys:

HTML:

<div id="unique-element" class="styled-box">
  Unikalus elementas
</div>
<div class="styled-box">
  Pirmas grupės elementas
</div>
<div class="styled-box highlight">
  Antras grupės elementas (su papildoma klase)
</div>

CSS:

#unique-element {
  /* Stilius unikaliam elementui, aukšto prioriteto */
  color: red;
}

.styled-box {
  /* Stilius elementų grupei */
  border: 1px solid blue;
  padding: 10px;
}

.highlight {
  /* Papildomas stilius kai kuriems elementams */
  background-color: yellow;
}

Lyginamoji lentelė:

Savybė	ID (Identifikatorius)	Class (Klasė)
Unikalumas	Unikalus puslapyje	Gali būti naudojamas kartotinai
Naudojimas	Vienas elementas gali turėti tik vieną ID	Vienas elementas gali turėti kelias klases
Specifiškumas	Aukštas	Vidutinis
Naudojimas JS	getElementById()	getElementsByClassName(), querySelectorAll()
Paskirtis	Unikalus elemento identifikavimas	Grupės elementų organizavimas pagal bendras savybes

Tinkamas id ir class naudojimas yra svarbus kodo organizacijai, stilių švarai ir efektyviam skriptų darbui. id turėtų būti naudojamas saikingai tik tikrai unikaliems elementams, o class – stiliams, kurie gali būti taikomi keliems elementams arba grupėms su panašiu elgesiu.