CSS kombinatorlar

CSS birlashtiruvchilari

Kombinator — ikki yoki undan ortiq selektor o‘rtasidagi bog‘liqlikni belgilovchi narsa.

CSS selektori birdan ortiq selektor o‘z ichiga olishi mumkin. Selektorlar orasiga ko‘proq aniq tanlov yaratish uchun kombinator kiritishimiz mumkin.

CSS’da to‘rt xil kombinator mavjud:

Avlod kombinatori (descendant combinator) ko‘rsatilgan elementning barcha avlodlari (bolalari, nevaralari va h.k.) bo‘lgan elementlarni tanlaydi.

Quyidagi misol <div> elementlari ichidagi barcha <p> elementlarini tanlaydi:

div p {
background-color: yellow;
}

Bola kombinatori (child combinator) ko‘rsatilgan elementning bevosita bolalari bo‘lgan barcha elementlarni tanlaydi.

Quyidagi misol <div> ning to‘g‘ridan-to‘g‘ri farzandi bo‘lgan barcha <p> elementlarini tanlaydi:

div > p {
background-color: yellow;
}

Keyingi qo‘shni kombinatori (next sibling combinator) ma’lum bir elementdan bevosita keyin joylashgan elementni tanlash uchun ishlatiladi.

O‘gay elementlar bir xil ota elementga ega bo‘lishi kerak.

Quyidagi misol <div> dan to‘g‘ridan-to‘g‘ri keyin keladigan va bir xil otaga ega bo‘lgan birinchi <p> elementini tanlaydi:

div + p {
background-color: yellow;
}

Keyingi barcha qo‘shnilar kombinatori (subsequent-sibling combinator) ko‘rsatilgan elementdan keyingi barcha qo‘shni elementlarni tanlaydi.

Quyidagi misol <div> ning keyingi qo‘shnilari bo‘lgan va bir xil otaga ega bo‘lgan barcha <p> elementlarini tanlaydi:

div ~ p {
background-color: yellow;
}

Barcha CSS kombinatorlarining to‘liq ro‘yxati uchun CSS Combinators ma’lumotnomasiga tashrif buyuring.

Yutuqlaringizni kuzating – bu bepul!