CSS veya JavaScript'te nasıl seçici kullanılır…

CSS'de seçiciler, HTML öğelerine stil uygulamak için kullanılır. JavaScript'te ise DOM öğelerini seçmek için kullanılırlar.

Temel CSS seçici türleri:

Tür seçici: Belirtilen türdeki tüm öğeleri seçer.
```
div {
  /* tüm <div> öğeleri için stil */
}
```

Sınıf seçici: Belirtilen sınıfa sahip öğeleri seçer.

.benim-sinif {
  /* "benim-sinif" sınıfına sahip öğeler için stil */
}

ID seçici: Belirtilen ID'ye sahip öğeyi seçer (benzersiz olmalı).

#benim-id {
  /* "benim-id" ID'sine sahip öğe için stil */
}

Evrensel seçici: Tüm öğeleri seçer.
```
* {
  /* tüm öğeler için stil */
}
```
Birleştiriciler: Seçicileri birleştirir.
- Alt öğe ( ): div p - <div> içindeki tüm <p> öğelerini seçer.
- Doğrudan alt öğe (>): div > p - <div>'in doğrudan çocukları olan <p> öğelerini seçer.
- Yan kardeş (+): h2 + p - <h2>'den hemen sonra gelen ilk <p> öğesini seçer.
- Genel kardeş (~): h2 ~ p - <h2>'den sonra gelen tüm <p> öğelerini seçer.

JavaScript'te DOM öğelerini seçmek için querySelector ve querySelectorAll metodları kullanılır.

querySelector: Belirtilen CSS seçiciyle eşleşen ilk öğeyi döndürür.

// İlk sınıfı "benim-sinif" olan öğeyi seç
const element = document.querySelector('.benim-sinif');

querySelectorAll: Belirtilen CSS seçiciyle eşleşen tüm öğelerin NodeList'ini döndürür.
```
// Tüm `<div>` öğelerini seç
const elementler = document.querySelectorAll('div');
```

JavaScript'te kullanım örneği:

// ID ile buton bul
const benimButon = document.querySelector('#benim-buton');

// Tıklama olay dinleyicisi ekle
if (benimButon) {
  benimButon.addEventListener('click', () => {
    alert('Butona tıklandı!');
  });
}

// Sınıfı "list-item" olan tüm liste öğelerini bul
const listeElemanlari = document.querySelectorAll('.list-item');

// Her liste öğesinin metnini değiştir
listeElemanlari.forEach(item => {
  item.textContent = 'Güncellenmiş metin';
});

CSS seçicileri ile JavaScript'teki kullanımları arasında doğrudan bir ilişki vardır. Aynı CSS seçicilerini kullanarak JavaScript'te öğeleri seçebilirsiniz.

CSS veya JavaScript'te nasıl seçici kullanılır?