Cum se folosește un selector în CSS sau JavaScript…

În CSS, selectorii indică asupra căror elemente HTML se aplică stilurile. În JavaScript, aceștia sunt folosiți pentru a selecta elemente DOM.

Tipurile principale de selectori CSS:

Selector de tip: Selectează toate elementele de un anumit tip.
```
div {
  /* stiluri pentru toate <div> */
}
```

Selector de clasă: Selectează elemente cu o clasă specifică.

.clasa-mea {
  /* stiluri pentru elemente cu clasa "clasa-mea" */
}

Selector ID: Selectează elementul cu un ID specific (trebuie să fie unic).
```
#id-ul-meu {
  /* stiluri pentru elementul cu ID "id-ul-meu" */
}
```

Selector universal: Selectează toate elementele.

* {
  /* stiluri pentru toate elementele */
}

Combinatori: combină selectorii.
- Descendent ( ): div p - selectează toate <p> din interiorul <div>.
- Copil direct (>): div > p - selectează toate <p> care sunt copii directe ale <div>.
- Frate adiacent (+): h2 + p - selectează primul <p> care urmează imediat după <h2>.
- Frate general (~): h2 ~ p - selectează toate <p> care urmează după <h2>.

În JavaScript, pentru selectarea elementelor DOM, se folosesc metodele querySelector și querySelectorAll.

querySelector: Returnează primul element care corespunde selectorului CSS specificat.

// Selectează primul element cu clasa "clasa-mea"
const element = document.querySelector('.clasa-mea');

querySelectorAll: Returnează o NodeList (similar cu un array) a tuturor elementelor care corespund selectorului CSS.
```
// Selectează toate elementele `<div>`
const elemente = document.querySelectorAll('div');
```

Exemplu de utilizare în JavaScript:

// Găsește un buton după ID
const butonulMeu = document.querySelector('#butonul-meu');

// Adaugă un handler pentru evenimentul de clic
if (butonulMeu) {
  butonulMeu.addEventListener('click', () => {
    alert('Butonul a fost apăsat!');
  });
}

// Găsește toate elementele de listă cu clasa "list-item"
const elementeLista = document.querySelectorAll('.list-item');

// Modifică textul fiecărui element de listă
elementeLista.forEach(item => {
  item.textContent = 'Text actualizat';
});

Raportul dintre selectorii CSS și utilizarea lor în JavaScript cu querySelector/querySelectorAll este direct. Puteți folosi aceiași selectori CSS ca și în stiluri pentru a selecta elemente în JavaScript.

Cum se folosește un selector în CSS sau JavaScript?