Hogyan használjuk a szelektort CSS-ben vagy…

A CSS-ben a szelektorok megadják, hogy mely HTML elemekre alkalmazzuk a stílusokat. JavaScript-ben azokat az DOM elemek kiválasztására használják.

A főbb CSS-szelektor típusok:

Típus-szelektor: Minden megadott típusú elemet kiválaszt.
```
div {
  /* stílusok minden <div>-hez */
}
```

Osztály-szelektor: Egy adott osztállyal rendelkező elemek kiválasztása.

.osztaly-om {
  /* stílusok az "osztaly-om" osztállyal rendelkező elemekhez */
}

ID-szelektor: Egy adott ID-vel rendelkező elem kiválasztása (egyedi kell legyen).
```
#sajat-id {
  /* stílusok az "sajat-id" ID-vel rendelkező elemhez */
}
```
Általános szelektor: Minden elemet kiválaszt.
```
* {
  /* stílusok minden elemhez */
}
```
Kombinátorok: A szelektorokat összekapcsolják.
- Leszármazott ( ): div p - kiválaszt minden <p>-t, ami <div>-en belül van.
- Közvetlen gyermek (>): div > p - kiválaszt minden <p>-t, ami közvetlen gyermek <div>-en.
- Szomszéd testvér (+): h2 + p - kiválasztja az első <p>-t, ami közvetlenül követ <h2>-t.
- Általános testvér (~): h2 ~ p - kiválasztja az összes <p>-t, ami <h2>-t követ.

JavaScript-ben a DOM elemek kiválasztására a querySelector és querySelectorAll metódusokat használják.

querySelector: Visszaadja az első olyan elemet, amely megfelel a megadott CSS-szelektornak.

// Az első "sajat-osztaly" osztállyal rendelkező elem kiválasztása
const elem = document.querySelector('.sajat-osztaly');

querySelectorAll: Visszaadja az összes olyan elemet, amely megfelel a CSS-szelektornak, NodeList-ként.
```
// Minden `<div>` elem kiválasztása
const elemek = document.querySelectorAll('div');
```

Példa JavaScript-ben:

// Gomb ID alapján való keresése
const gombom = document.querySelector('#gombom');

// Kattintás esemény hozzáadása
if (gombom) {
  gombom.addEventListener('click', () => {
    alert('Gomb megnyomva!');
  });
}

// Minden listázott elem, osztály szerint
const listaElemek = document.querySelectorAll('.lista-item');

// Minden elem szövegének módosítása
listaElemek.forEach(elem => {
  elem.textContent = 'Frissített szöveg';
});

A CSS-szelektorok és azok JavaScript-ben való használata közvetlen kapcsolatban állnak. Ugyanazokat a CSS-szelektorokat használhatod az elemek kiválasztására JavaScript-ben, mint a stíluslapokon.

Hogyan használjuk a szelektort CSS-ben vagy JavaScriptben?