Как да използваме селектор в CSS или JavaScript…

В CSS селекторите посочват към кои HTML елементи да се прилагат стиловете. В JavaScript те се използват за избор на DOM елементи.

Основните типове CSS селектори са:

Тип селектор: Избира всички елементи от даден тип.
```
div {
  /* стилове за всички <div> */
}
```

Клас селектор: Избира елементи с определен клас.

.моя-клас {
  /* стилове за елементи с клас "моя-клас" */
}

ID селектор: Избира елемент с определен ID (трябва да е уникален).
```
#моя-ид {
  /* стилове за елемента с ID "моя-ид" */
}
```
Универсален селектор: Избира всички елементи.
```
* {
  /* стилове за всички елементи */
}
```
Комбинатори: Комбинират селектори.
- Потомък ( ): div p - избира всички <p> вътре в <div>.
- Директен потомък (>): div > p - избира всички <p>, които са директни деца на <div>.
- Съседен брат (+): h2 + p - избира първия <p>, който следва непосредствено след <h2>.
- Общ брат (~): h2 ~ p - избира всички <p>, които следват <h2>.

В JavaScript, за избор на DOM елементи, се използват методите querySelector и querySelectorAll.

querySelector: Връща първия елемент, който съответства на CSS селектора.

// Избира първия елемент с клас "моя-клас"
const елемент = document.querySelector('.моя-клас');

querySelectorAll: Връща NodeList (подобен на масив) на всички елементи, които съответстват на селектора.
```
// Избира всички `<div>` елементи
const елементи = document.querySelectorAll('div');
```

Пример за използване в JavaScript:

// Намира бутон по ID
const моятБутон = document.querySelector('#моят-бутон');

// Добавя обработчик за клик събитие
if (моятБутон) {
  моятБутон.addEventListener('click', () => {
    alert('Бутонът беше натиснат!');
  });
}

// Намира всички елементи от списък с клас "list-item"
const елементиОтСписъка = document.querySelectorAll('.list-item');

// Променя текста на всеки елемент от списъка
елементиОтСписъка.forEach(елемент => {
  елемент.textContent = 'Обновен текст';
});

Връзката между CSS селекторите и тяхната употреба в JavaScript с querySelector/querySelectorAll е пряка. Можете да използвате същите CSS селектори, които използвате в стиловете, за да избирате елементи в JavaScript.

Как да използваме селектор в CSS или JavaScript?