Jak použít selektor v CSS nebo JavaScriptu?

V CSS určují selektory, na které HTML prvky se mají aplikovat styly. V JavaScriptu se používají k výběru prvků DOM.

Hlavní typy CSS selektorů:

• Typový selektor: Vybere všechny prvky daného typu.

  div {
    /* styly pro všechny <div> */
  }
  

• Třídní selektor: Vybere prvky s danou třídou.

  .má-trida {
    /* styly pro prvky s třídou "má-trida" */
  }
  

• ID selektor: Vybere prvek s daným ID (musí být jedinečné).

  #můj-id {
    /* styly pro prvek s ID "můj-id" */
  }
  

• Univerzální selektor: Vybere všechny prvky.

  * {
    /* styly pro všechny prvky */
  }
  

• Kombinátory: Spojují selektory.
  • Potomek ( ): div p - vybere všechny <p> uvnitř <div>.
  • Přímý potomek (>): div > p - vybere všechny <p>, které jsou přímými potomky <div>.
  • Sousední bratr (+): h2 + p - vybere první <p>, který následuje přímo za <h2>.
  • Obecný bratr (~): h2 ~ p - vybere všechny <p>, které následují za <h2>.

V JavaScriptu se pro výběr prvků DOM používají metody querySelector a querySelectorAll.

• querySelector: Vrací první prvek odpovídající zadanému CSS selektoru.

  // Vybere první prvek s třídou "má-trida"
  const prvek = document.querySelector('.má-trida');
  

• querySelectorAll: Vrací NodeList (podobný poli) všech prvků odpovídajících CSS selektoru.

  // Vybere všechny `<div>` prvky
  const prvky = document.querySelectorAll('div');
  

Příklad použití v JavaScriptu:

// Najít tlačítko podle ID
const mojeTlacitko = document.querySelector('#moje-tlacitko');

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

// Najít všechny položky seznamu s třídou "list-item"
const prvkySeznamu = document.querySelectorAll('.list-item');

// Změnit text každé položky seznamu
prvkySeznamu.forEach(prvek => {
  prvek.textContent = 'Aktualizovaný text';
});

Vztah mezi CSS selektory a jejich použitím v JavaScriptu s querySelector/querySelectorAll je přímý. Můžete použít stejné CSS selektory, které používáte ve stylech, k výběru prvků v JavaScriptu.