Welke verschillen ken je tussen klassen en identificators (ID)?

De selectors class en id worden gebruikt om elementen in HTML te selecteren en er stijlen of scripts op toe te passen.

Belangrijkste verschillen:

• Uniekheid:
  • id moet uniek zijn op de hele HTML-pagina. Elk element mag slechts één id hebben, en er mogen niet twee elementen met dezelfde id op de pagina zijn.
  • class kan meerdere keren worden gebruikt op dezelfde pagina. Verschillende elementen kunnen dezelfde class hebben, en één element kan meerdere classes hebben.
• Specificiteit:
  • id heeft een hogere specificiteit (gewicht) bij het toepassen van stijlen in vergelijking met class. De stijl die via id is ingesteld, krijgt prioriteit boven die via class of tag, tenzij er meer specifieke regels zijn.
  • class heeft een lagere specificiteit dan id, maar hoger dan tag-selectors.
• Gebruik in JavaScript:
  • id wordt vaak gebruikt om een uniek element uit de DOM te halen met document.getElementById(), wat een snelle manier van toegang is.
  • class wordt meestal gebruikt om een groep elementen te selecteren met document.getElementsByClassName() of document.querySelectorAll().

Voorbeeld:

HTML:

<div id="unique-element" class="styled-box">
  Uniek element
</div>
<div class="styled-box">
  Eerste element van de groep
</div>
<div class="styled-box highlight">
  Tweede element van de groep (met extra klasse)
</div>

CSS:

#unique-element {
  /* Stijl voor het unieke element met hoge prioriteit */
  color: red;
}

.styled-box {
  /* Stijl voor de groep elementen */
  border: 1px solid blue;
  padding: 10px;
}

.highlight {
  /* Extra stijl voor sommige elementen */
  background-color: yellow;
}

Vergelijkingstabel:

Kenmerk	ID (Identificatie)	Class (Klasse)
Uniekheid	Uniek op de pagina	Kan meerdere keren worden gebruikt
Toepassing	Eén element kan slechts één ID hebben	Eén element kan meerdere klassen hebben
Specificiteit	Hoog	Gemiddeld
Gebruik in JS	getElementById()	getElementsByClassName(), querySelectorAll()
Doel	Identificatie van een uniek element	Groeperen van elementen op basis van gemeenschappelijke eigenschappen

Het correct gebruiken van id en class is belangrijk voor het organiseren van de code, het behouden van schone stijlen en het efficiënt werken met scripts. id moet spaarzaam worden gebruikt voor echt unieke elementen, en class voor stijlen die op meerdere elementen kunnen worden toegepast of voor het groeperen van elementen met vergelijkbaar gedrag.