CSS yoki JavaScriptda tanlovchi qanday ishlatiladi…

CSS selektorlar HTML elementlariga uslublar qoʻllash uchun ko‘rsatiladi. JavaScriptda ular DOM elementlarini tanlash uchun ishlatiladi.

Asosiy CSS selektor turlari:

Turi selektori: Belgilangan turdagi barcha elementlarni tanlaydi.
```
div {
  /* barcha <div> uchun uslublar */
}
```

Sinf selektori: Belgilangan sinfga ega elementlarni tanlaydi.

.menga-sinf {
  /* "menga-sinf" sinfiga ega elementlar uchun uslublar */
}

ID selektori: Belgilangan IDga ega elementni tanlaydi (unikal bo‘lishi kerak).
```
#mening-id {
  /* "mening-id" IDga ega element uchun uslublar */
}
```

Umumiy selektor: Barcha elementlarni tanlaydi.

* {
  /* barcha elementlar uchun uslublar */
}

Kombinatorlar: Selektorlarni birlashtiradi.
- Voris ( ): div p - <div> ichidagi barcha <p> elementlarini tanlaydi.
- To‘g‘ridan-to‘g‘ri voris (>): div > p - <div> ning to‘g‘ridan-to‘g‘ri bolalari bo‘lgan <p> elementlarini tanlaydi.
- Yon tengdosh (+): h2 + p - <h2> dan darhol keyingi <p> elementini tanlaydi.
- Umumiy tengdosh (~): h2 ~ p - <h2> dan keyingi barcha <p> elementlarini tanlaydi.

JavaScriptda DOM elementlarini tanlash uchun querySelector va querySelectorAll metodlari ishlatiladi.

querySelector: Belgilangan CSS selektorga mos keladigan birinchi elementni qaytaradi.

// Birinchi "menga-sinf" sinfiga ega elementni tanlash
const element = document.querySelector('.menga-sinf');

querySelectorAll: CSS selektorga mos keladigan barcha elementlarning NodeListini qaytaradi.

// Barcha `<div>` elementlarini tanlash
const elementlar = document.querySelectorAll('div');

JavaScriptda foydalanish misoli:

// ID bo‘yicha tugmani topish
const meningTugma = document.querySelector('#mening-tugma');

// Klik hodisasi uchun event qo‘shish
if (meningTugma) {
  meningTugma.addEventListener('click', () => {
    alert('Tugma bosildi!');
  });
}

// "list-item" sinfiga ega barcha ro‘yxat elementlarini topish
const ro‘yxatElementlari = document.querySelectorAll('.list-item');

// Har bir ro‘yxat elementining matnini o‘zgartirish
ro‘yxatElementlari.forEach(item => {
  item.textContent = 'Yangilangan matn';
});

CSS selektorlar va ularning JavaScriptda querySelector/querySelectorAll bilan ishlatilishi to‘g‘ridan-to‘g‘ri bog‘liq. Siz CSSda ishlatiladigan selektorlarni JavaScriptda ham ishlatishingiz mumkin.

CSS yoki JavaScriptda tanlovchi qanday ishlatiladi?