Jak se zjistí, že všechny prvky mají stejné…

Třídy (class) a identifikátory (id) jsou HTML atributy, které umožňují vybírat prvky pro stylování pomocí CSS a interakci pomocí JavaScriptu.

Třída:

Může být přiřazena několika HTML prvkům.
Používá se ke skupinování prvků s společnými vizuálními nebo chováními vlastnostmi.
V CSS začíná selektor třídy tečkou (.), například: .má-trida.
V JavaScriptu jsou prvky podle třídy vybírány metodami getElementsByClassName nebo querySelectorAll.

Identifikátor:

Musí být unikátní v rámci celé HTML stránky.
Používá se k identifikaci konkrétního prvku.
V CSS začíná selektor identifikátoru znakem hash (#), například: #můj-iden.
V JavaScriptu je prvek podle ID vybírán metodou getElementById.

Příklad:

  <div class="karta">
      <p>Text karty 1</p>
  </div>
  <div class="karta">
      <p>Text karty 2</p>
  </div>
  <button id="můjTlačítko" class="btn">Tlačítko</button>

  .karta { /* Stylování všech prvků s třídou "karta" */
      border: 1px solid grey;
      padding: 10px;
      margin-bottom: 10px;
  }

  #můjTlačítko { /* Stylování pouze prvku s ID "můjTlačítko" */
      background-color: blue;
      color: white;
  }

  .btn { /* Obecné styly pro všechny tlačítka */
      padding: 8px 16px;
      cursor: pointer;
  }

  // Získat všechny prvky s třídou "karta"
  const karty = document.getElementsByClassName('karta');

  // Získat prvek s ID "můjTlačítko"
  const tlačítko = document.getElementById('můjTlačítko');

  // Přidat obsluhu události kliknutí na tlačítko
  if (tlačítko) {
      tlačítko.addEventListener('click', () => {
          alert('Tlačítko bylo stisknuto!');
      });
  }

Jak třídy, tak identifikátory jsou HTML atributy, které jsou přímo nastaveny v markup. To jim umožňuje být použity pro stylování (přes CSS) a řízení chování (přes JavaScript). Použití tříd pro podobné prvky a unikátních ID pro jednotlivé prvky je běžná praxe.

Jak se zjistí, že všechny prvky mají stejné vlastnosti, například třídu a identifikátor?