Jak okazuje się, że wszystkie elementy mają takie…

Klasy (class) i identyfikatory (id) to atrybuty HTML, które umożliwiają wybieranie elementów do stylizacji za pomocą CSS i interakcji za pomocą JavaScript.

Klasa:

Może być przypisana do kilku elementów HTML.
Służy do grupowania elementów o wspólnych cechach wizualnych lub behawioralnych.
W CSS selektor klasy zaczyna się od kropki (.), np.: .moja-klasa.
W JavaScript elementy po klasie wybiera się metodami getElementsByClassName lub querySelectorAll.

Identyfikator:

Musi być unikalny w obrębie całej strony HTML.
Służy do identyfikacji konkretnego elementu.
W CSS selektor identyfikatora zaczyna się od znaku hash (#), np.: #moje-id.
W JavaScript element po ID wybiera się metodą getElementById.

Przykład:

  <div class="karta">
      <p>Tekst karty 1</p>
  </div>
  <div class="karta">
      <p>Tekst karty 2</p>
  </div>
  <button id="mójPrzycisk" class="btn">Przycisk</button>

  .karta { /* Stylizacja wszystkich elementów z klasą "karta" */
      border: 1px solid grey;
      padding: 10px;
      margin-bottom: 10px;
  }

  #mójPrzycisk { /* Stylizacja tylko elementu z ID "mójPrzycisk" */
      background-color: blue;
      color: white;
  }

  .btn { /* Wspólne style dla wszystkich przycisków */
      padding: 8px 16px;
      cursor: pointer;
  }

  // Pobierz wszystkie elementy z klasą "karta"
  const karty = document.getElementsByClassName('karta');

  // Pobierz element z ID "mójPrzycisk"
  const przycisk = document.getElementById('mójPrzycisk');

  // Dodaj obsługę zdarzenia kliknięcia do przycisku
  if (przycisk) {
      przycisk.addEventListener('click', () => {
          alert('Przycisk został naciśnięty!');
      });
  }

Zarówno klasy, jak i identyfikatory są atrybutami HTML, które są ustawiane bezpośrednio w kodzie. Umożliwia to ich użycie do stylizacji (przez CSS) i zarządzania zachowaniem (przez JavaScript). Używanie klas dla podobnych elementów i unikalnych ID dla pojedynczych elementów jest standardową praktyką.

Jak okazuje się, że wszystkie elementy mają takie same właściwości, takie jak klasa i identyfikator?