Чӣ гуна истифода бурдани селектор дар CSS ё…

Дар CSS-селекториҳо нишон медиҳанд, ки ба кадом элементҳои HTML бояд услубҳо татбиқ шаванд. Дар JavaScript онҳо барои интихоби элементҳои DOM истифода мешаванд.

Типҳои асосии селекторҳои CSS:

Селектори навъ: Ҳама элементҳои навъи муайянро интихоб мекунад.
```
div {
  /* услубҳо барои ҳама <div> */
}
```
Селектори синф: Элементҳое бо синф муайянро интихоб мекунад.
```
.my-class {
  /* услубҳо барои элементҳо бо синфи "my-class" */
}
```
ID селектори: Элемент бо ID муайянро интихоб мекунад (мебоён аст, ки ягона бошад).
```
#my-id {
  /* услубҳо барои элемент бо ID "my-id" */
}
```
Селектори умуми: Ҳама элементҳоро интихоб мекунад.
```
* {
  /* услубҳо барои ҳама элементҳо */
}
```
Комбинаторҳо: Селекторҳоро мепайванданд.
- Насл ( ): div p - ҳамаи <p>-ҳоро дар дохили <div> интихоб мекунад.
- Насли мустақим (>): div > p - ҳамаи <p>-ҳоро, ки мустақиман дар дохили <div> мебошанд.
- Бародарони ҳамсоя (+): h2 + p - аввалин <p>-ро, ки бевосита пас аз <h2> меояд.
- Бародарони умумӣ (~): h2 ~ p - ҳамаи <p>-ҳоро, ки пас аз <h2> меоянд.

Дар JavaScript, барои интихоби элементҳои DOM, методҳо querySelector ва querySelectorAll истифода мешаванд.

querySelector: аввалин элементро, ки мувофиқ аст, бармегардонад.

// аввалин элемент бо синфи "my-class"-ро интихоб мекунад
const element = document.querySelector('.my-class');

querySelectorAll: NodeList-ро (монанд ба массив) аз ҳамаи элементҳое, ки мувофиқанд, бармегардонад.
```
// ҳамаи элементҳои <div>-ро интихоб мекунад
const elements = document.querySelectorAll('div');
```

Маслиҳат дар JavaScript:

// Тугмаро бо ID пайдо мекунем
const myButton = document.querySelector('#my-button');

// Воқеа барои клик илова мекунем
if (myButton) {
  myButton.addEventListener('click', () => {
    alert('Тугма пахш шуд!');
  });
}

// Ҳама элементҳои рӯйхат бо синфи "list-item"-ро пайдо мекунем
const listItems = document.querySelectorAll('.list-item');

// Матни ҳар як элементро тағир медиҳем
listItems.forEach(item => {
  item.textContent = 'Матни навсозишуда';
});

Масофат байни CSS-селекторҳо ва истифодаи онҳо дар JavaScript querySelector/querySelectorAll мустақим аст. Шумо метавонед ҳамон CSS-селекторҳоро истифода баред, ки дар стилҳо барои интихоби элементҳо истифода мебаред.

Чӣ гуна истифода бурдани селектор дар CSS ё JavaScript?