Millised erinevused on sinu teada klasside ja identifikaatorite (ID) vahel?

Selektorid class ja id kasutatakse HTML elementide valimiseks ning nendele stiilide või skriptide rakendamiseks.

Peamised erinevused:

• Unikaalsus:
  • id peab olema kogu HTML-lehel unikaalne. Iga element võib omada ainult ühte id, ning lehel ei tohi olla kahte elementi sama id-ga.
  • class võib olla kasutusel korduvalt ühel lehel. Mitmed elemendid võivad omada sama class, ning üks element võib omada mitut klassi.
• Spetsiifilisus:
  • id omab suuremat spetsiifilisust (kaalu) stiilide rakendamisel võrreldes class-iga. Stiil, mis on määratud id-ga, on prioriteetne class-i või tagi stiili ees, kui ei ole spetsiifilisemaid reegleid.
  • class omab madalamat spetsiifilisust kui id, kuid kõrgemat kui tagi selektorid.
• Kasutamine JavaScriptis:
  • id kasutatakse sageli unikaalse elemendi saamiseks DOM-ist document.getElementById() abil, mis on kiire viis elemendile ligi pääseda.
  • class kasutatakse tavaliselt elementide grupi valimiseks document.getElementsByClassName() või document.querySelectorAll() abil.

Näide:

HTML:

<div id="unique-element" class="styled-box">
  Unikaalne element
</div>
<div class="styled-box">
  Esimene grupi element
</div>
<div class="styled-box highlight">
  Teine grupi element (täiendava klassiga)
</div>

CSS:

#unique-element {
  /* Stiil unikaalsele elemendile, kõrge prioriteet */
  color: red;
}

.styled-box {
  /* Stiil grupi elementidele */
  border: 1px solid blue;
  padding: 10px;
}

.highlight {
  /* Täiendav stiil mõnele elemendile */
  background-color: yellow;
}

Võrdlustabel:

Omadus	ID (Tunnus)	Class (Klass)
Unikaalsus	Unikaalne lehel	Võib olla korduvkasutatav
Kasutus	Üks element võib omada ainult ühte ID	Üks element võib omada mitut klassi
Spetsiifilisus	Kõrge	Keskmine
JS kasutamine	getElementById()	getElementsByClassName(), querySelectorAll()
Eesmärk	Unikaalse elemendi identifitseerimine	Elementide rühmitamine ühiste omaduste järgi

Õige id ja class kasutamine on oluline koodi korraldamise, stiilide puhtuse ning skriptidega tõhusa töö jaoks. id tuleks kasutada mõõdukalt ainult tõeliselt unikaalsete elementide jaoks, samas kui class on mõeldud stiilidele, mida saab rakendada mitmele elemendile või elementide rühmadele sarnase käitumisega.