Aké rozdiely poznáš medzi triedami a identifikátormi (ID)?

Selektory class a id sa používajú na výber prvkov v HTML a na aplikáciu štýlov alebo skriptov na ne.

Hlavné rozdiely:

• Unikátnosť:
  • id musí byť jedinečné na celej HTML stránke. Každý prvok môže mať iba jedno id, a na stránke nemôžu byť dva prvky s rovnakým id.
  • class môže byť použitý opakovane na jednej stránke. Niekoľko prvkov môže mať rovnaký class, a jeden prvok môže mať viacero tried.
• Špecifickosť:
  • id má vyššiu špecifickosť (váhu) pri použití štýlov v porovnaní s class. Štýl definovaný cez id má prioritu pred štýlom definovaným cez class alebo tag, ak neexistujú špecifickejšie pravidlá.
  • class má nižšiu špecifickosť ako id, ale vyššiu ako selektory podľa tagu.
• Použitie v JavaScripte:
  • id sa často používa na získanie jedinečného prvku z DOM pomocou document.getElementById(), čo je rýchly spôsob prístupu k prvku.
  • class sa zvyčajne používa na výber skupiny prvkov pomocou document.getElementsByClassName() alebo document.querySelectorAll().

Príklad:

HTML:

<div id="unique-element" class="styled-box">
  Unikátny prvok
</div>
<div class="styled-box">
  Prvý prvok skupiny
</div>
<div class="styled-box highlight">
  Druhý prvok skupiny (s dodatočnou triedou)
</div>

CSS:

#unique-element {
  /* Štýl pre unikátny prvok s vysokým priorítom */
  color: red;
}

.styled-box {
  /* Štýl pre skupinu prvkov */
  border: 1px solid blue;
  padding: 10px;
}

.highlight {
  /* Dodatočný štýl pre niektoré prvky */
  background-color: yellow;
}

Porovnávacia tabuľka:

Charakteristika	ID (Identifikátor)	Class (Trieda)
Unikátnosť	Unikátny na stránke	Môže byť použitý viackrát
Použitie	Jeden prvok môže mať jedno ID	Jeden prvok môže mať viacero tried
Špecifickosť	Vysoká	Stredná
Použitie v JS	getElementById()	getElementsByClassName(), querySelectorAll()
Účel	Identifikácia unikátneho prvku	Skupina prvkov podľa spoločných vlastností

Správne používanie id a class je dôležité pre organizáciu kódu, udržiavanie čistoty štýlov a efektívnu prácu so skriptami. id by malo byť používané striedmo pre skutočne unikátne prvky, zatiaľ čo class pre štýly, ktoré môžu byť použité na viacerých prvkoch alebo na skupiny prvkov s podobným správaním.