Ako použiť selektor v CSS alebo JavaScript?

V CSS selektory ukazujú, na ktoré HTML prvky sa majú aplikovať štýly. V JavaScript-e sa používajú na výber DOM prvkov.

Hlavné typy CSS selektorov:

• Typ selektora: Vyberá všetky prvky daného typu.

  div {
    /* štýly pre všetky <div> */
  }
  

• Selektor triedy: Vyberá prvky s danou triedou.

  .my-class {
    /* štýly pre prvky s triedou "my-class" */
  }
  

• ID selektor: Vyberá prvok s daným ID (musí byť jedinečný).

  #my-id {
    /* štýly pre prvok s ID "my-id" */
  }
  

• Univerzálny selektor: Vyberá všetky prvky.

  * {
    /* štýly pre všetky prvky */
  }
  

• Kombinátory: Spájajú selektory.
  • Potomok ( ): div p - vyberá všetky <p> vo vnútri <div>.
  • Priamy potomok (>): div > p - vyberá všetky <p>, ktoré sú priami potomkovia <div>.
  • Susedný brat (+): h2 + p - vyberá prvý <p>, ktorý nasleduje bezprostredne po <h2>.
  • Všeobecný brat (~): h2 ~ p - vyberá všetky <p>, ktoré nasledujú po <h2>.

V JavaScript-e sa na výber DOM prvkov používajú metódy querySelector a querySelectorAll.

• querySelector: Vráti prvý prvok, ktorý zodpovedá danému CSS selektoru.

  // Vyberie prvý prvok s triedou "my-class"
  const element = document.querySelector('.my-class');
  

• querySelectorAll: Vráti NodeList (podobný poľu) všetkých prvkov, ktoré zodpovedajú danému CSS selektoru.

  // Vyberie všetky prvky <div>
  const elements = document.querySelectorAll('div');
  

Príklad použitia v JavaScript-e:

// Nájdeme tlačidlo podľa ID
const myButton = document.querySelector('#my-button');

// Pridáme obsluhu udalosti kliknutia
if (myButton) {
  myButton.addEventListener('click', () => {
    alert('Tlačidlo bolo stlačené!');
  });
}

// Nájdeme všetky položky zoznamu s triedou "list-item"
const listItems = document.querySelectorAll('.list-item');

// Zmeníme text každej položky zoznamu
listItems.forEach(item => {
  item.textContent = 'Aktualizovaný text';
});

Vzťah medzi CSS selektormi a ich použitím v JavaScript querySelector/querySelectorAll je priamy. Môžete použiť rovnaké CSS selektory ako v štýloch na výber prvkov v JavaScript-e.