Jaké rozdíly znáš mezi třídami a identifikátory (ID)?

Selektory class a id se používají k výběru prvků v HTML a aplikaci stylů nebo skriptů na ně.

Hlavní rozdíly:

• Unikátnost:
  • id musí být jedinečné na celé HTML stránce. Každý prvek může mít pouze jedno id, a na stránce nesmí být dva prvky se stejným id.
  • class může být použito opakovaně na jedné stránce. Několik prvků může mít stejný class, a jeden prvek může mít více tříd.
• Specifičnost:
  • id má vyšší specifitu (váhu) při použití stylů ve srovnání s class. Styl definovaný přes id má přednost před stylem definovaným přes class nebo tag, pokud neplatí specifičtější pravidla.
  • class má nižší specifitu než id, ale vyšší než selektory podle tagu.
• Použití v JavaScriptu:
  • id se často používá k získání unikátního prvku z DOM pomocí document.getElementById(), což je rychlý způsob přístupu k prvku.
  • class se obvykle používá k výběru skupiny prvků pomocí document.getElementsByClassName() nebo document.querySelectorAll().

Příklad:

HTML:

<div id="unique-element" class="styled-box">
  Unikátní prvek
</div>
<div class="styled-box">
  První prvek skupiny
</div>
<div class="styled-box highlight">
  Druhý prvek skupiny (s dodatečnou třídou)
</div>

CSS:

#unique-element {
  /* Styl pro unikátní prvek s vysokým prioritem */
  color: red;
}

.styled-box {
  /* Styl pro skupinu prvků */
  border: 1px solid blue;
  padding: 10px;
}

.highlight {
  /* Dodatečný styl pro některé prvky */
  background-color: yellow;
}

Porovnávací tabulka:

Charakteristika	ID (Identifikátor)	Class (Třída)
Unikátnost	Unikátní na stránce	Může být použito opakovaně
Použití	Jeden prvek může mít jedno ID	Jeden prvek může mít více tříd
Specifičnost	Vysoká	Střední
Použití v JS	getElementById()	getElementsByClassName(), querySelectorAll()
Účel	Identifikace unikátního prvku	Skupina prvků podle společných vlastností

Správné používání id a class je důležité pro organizaci kódu, udržení čistoty stylů a efektivní práci se skripty. id by mělo být používáno střídmě pro skutečně unikátní prvky, zatímco class pro styly, které mohou být použity na více prvcích nebo pro skupiny prvků s podobným chováním.