Jakie znasz różnice między klasami a identyfikatorami (ID)?

Selektory class i id służą do wybierania elementów w HTML i stosowania do nich stylów lub skryptów.

Główne różnice:

• Unikalność:
  • id musi być unikalne na całej stronie HTML. Każdy element może mieć tylko jedno id, i na stronie nie powinno być dwóch elementów z tym samym id.
  • class może być używany wielokrotnie na jednej stronie. Kilka elementów może mieć ten sam class, a jeden element może mieć wiele klas.
• Specyficzność:
  • id ma wyższą specyficzność (wagę) przy stosowaniu stylów w porównaniu do class. Styl zdefiniowany przez id będzie miał priorytet nad stylem zdefiniowanym przez class lub tag, jeśli nie ma bardziej specyficznych reguł.
  • class ma niższą specyficzność niż id, ale wyższą niż selektory tagów.
• Użycie w JavaScript:
  • id jest często używany do pobierania unikalnego elementu z DOM za pomocą document.getElementById(), co jest szybkim sposobem dostępu do elementu.
  • class jest zwykle używany do wybierania grupy elementów za pomocą document.getElementsByClassName() lub document.querySelectorAll().

Przykład:

HTML:

<div id="unique-element" class="styled-box">
  Unikalny element
</div>
<div class="styled-box">
  Pierwszy element grupy
</div>
<div class="styled-box highlight">
  Drugi element grupy (z dodatkową klasą)
</div>

CSS:

#unique-element {
  /* Styl dla unikalnego elementu z wysokim priorytetem */
  color: red;
}

.styled-box {
  /* Styl dla grupy elementów */
  border: 1px solid blue;
  padding: 10px;
}

.highlight {
  /* Dodatkowy styl dla niektórych elementów */
  background-color: yellow;
}

Tabela porównawcza:

Cecha	ID (Identyfikator)	Class (Klasa)
Unikalność	Unikalny na stronie	Może być używany wielokrotnie
Zastosowanie	Jeden element może mieć tylko jedno ID	Jeden element może mieć wiele klas
Specyficzność	Wysoka	Średnia
Użycie w JS	getElementById()	getElementsByClassName(), querySelectorAll()
Cel	Identyfikacja unikalnego elementu	Grupowanie elementów według wspólnych właściwości

Poprawne użycie id i class jest ważne dla organizacji kodu, utrzymania czystych stylów i efektywnej pracy ze skryptami. id należy używać oszczędnie dla naprawdę unikalnych elementów, a class dla stylów, które mogą być stosowane do wielu elementów lub do grupowania elementów o podobnym zachowaniu.