CSS və ya JavaScript-də seçici necə istifadə olunur…

CSS-də seçicilər HTML elementlərinə tətbiq ediləcək üslubləri göstərir. JavaScript-də isə onlar DOM elementlərini seçmək üçün istifadə olunur.

Əsas CSS seçici növləri:

Növ seçici: Müəyyən bir növdəki bütün elementləri seçir.
```
div {
  /* bütün <div> üçün üslublar */
}
```

Sinif seçici: Müəyyən bir sinfə malik elementləri seçir.

.mənim-sinifim {
  /* "mənim-sinifim" sinfi olan elementlər üçün üslublar */
}

ID seçici: Müəyyən bir ID-yə malik elementi seçir (unikal olmalıdır).
```
#mənim-id {
  /* "mənim-id" ID-li element üçün üslublar */
}
```

Ümumi seçici: Bütün elementləri seçir.

* {
  /* bütün elementlər üçün üslublar */
}

Kombinatorlar: Seçiciləri birləşdirir.
- Nəsil ( ): div p - <div> içindəki bütün <p> elementlərini seçir.
- Birbaşa övlad (>): div > p - <div>-in birbaşa övladları olan <p> elementlərini seçir.
- Yaxın qardaş (+): h2 + p - <h2>-dən dərhal sonra gələn ilk <p> elementini seçir.
- Ümumi qardaş (~): h2 ~ p - <h2>-dən sonra gələn bütün <p> elementlərini seçir.

JavaScript-də DOM elementlərini seçmək üçün querySelector və querySelectorAll metodlarından istifadə olunur.

querySelector: Verilən CSS seçiciyə uyğun ilk elementi qaytarır.

// İlk "mənim-sinifim" sinfinə malik elementi seç
const element = document.querySelector('.mənim-sinifim');

querySelectorAll: CSS seçiciyə uyğun bütün elementlərin NodeListini qaytarır.

// Bütün `<div>` elementlərini seç
const elementlər = document.querySelectorAll('div');

JavaScript-də istifadə nümunəsi:

// ID ilə düyməni tap
const mənimDüyməm = document.querySelector('#mənim-düyməm');

// Klik hadisəsini əlavə et
if (mənimDüyməm) {
  mənimDüyməm.addEventListener('click', () => {
    alert('Düymə basıldı!');
  });
}

// "list-item" sinfinə malik bütün siyahı elementlərini tap
const siyahıElementləri = document.querySelectorAll('.list-item');

// Hər siyahı elementinin mətnini dəyiş
siyahıElementləri.forEach(element => {
  element.textContent = 'Yenilənmiş mətn';
});

CSS seçiciləri və onların JavaScript-də querySelector/querySelectorAll ilə istifadəsi birbaşa əlaqəlidir. Siz eyni CSS seçicilərindən istifadə edərək JavaScript-də elementləri seçə bilərsiniz.

CSS və ya JavaScript-də seçici necə istifadə olunur?