Kako koristiti selektor u CSS ili JavaScript…

U CSS-u, selektori ukazuju na elemente HTML na koje primenjujemo stilove. U JavaScript-u, oni se koriste za izbor DOM elemenata.

Glavne vrste CSS selektora:

Tip selektora: Izbor svih elemenata određenog tipa.
```
div {
  /* stilovi za sve <div> */
}
```

Selektor klase: Izbor elemenata sa navedenom klasom.

.my-class {
  /* stilovi za elemente sa klasom "my-class" */
}

ID selektor: Izbor elementa sa datim ID-jem (mora biti jedinstven).
```
#my-id {
  /* stilovi za element sa ID "my-id" */
}
```
Univerzalni selektor: Izbor svih elemenata.
```
* {
  /* stilovi za sve elemente */
}
```
Kombinatori: Kombinuju selektore.
- Potomak ( ): div p - bira sve <p> unutar <div>.
- Direktni potomak (>): div > p - bira sve <p> koji su direktni potomci <div>.
- Susedni brat (+): h2 + p - bira prvi <p> koji sledi odmah nakon <h2>.
- Opšti brat (~): h2 ~ p - bira sve <p> koji slede nakon <h2>.

U JavaScript-u, za izbor DOM elemenata koriste se metode querySelector i querySelectorAll.

querySelector: Vraća prvi element koji odgovara datom CSS selektoru.

// Izbor prvog elementa sa klasom "my-class"
const element = document.querySelector('.my-class');

querySelectorAll: Vraća NodeList (slično nizu) svih elemenata koji odgovaraju datom CSS selektoru.
```
// Izbor svih <div> elemenata
const elements = document.querySelectorAll('div');
```

Primer korišćenja u JavaScript-u:

// Pronalazak dugmeta po ID
const myButton = document.querySelector('#my-button');

// Dodavanje event listener-a za klik
if (myButton) {
  myButton.addEventListener('click', () => {
    alert('Dugme je kliknuto!');
  });
}

// Pronalazak svih stavki liste sa klasom "list-item"
const listItems = document.querySelectorAll('.list-item');

// Promena teksta svake stavke liste
listItems.forEach(item => {
  item.textContent = 'Ažurirani tekst';
});

Odnos između CSS selektora i njihove upotrebe u JavaScript querySelector/querySelectorAll je direktan. Možete koristiti iste CSS selektore koje koristite u stilovima za izbor elemenata u JavaScript-u.

Kako koristiti selektor u CSS ili JavaScript?