Combinators

CSS Kombinatorlari

Kombinator - bu tanlovchilar o'rtasidagi munosabatni tushuntiradigan narsa.

CSS tanlovchisi bir nechta oddiy tanlovchini o'z ichiga olishi mumkin. Oddiy tanlovchilar o'rtasida biz kombinator qo'shishimiz mumkin.

CSSda to'rt xil kombinator mavjud:

• avlod tanlovchisi (bo'sh joy)
• bolalar tanlovchisi (>)
• qo'shni aka-uka tanlovchisi (+)
• umumiy aka-uka tanlovchisi (~)

Avlod Tanlovchisi

Avlod tanlovchisi belgilangan elementning barcha avlodlarini mos keladi.

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

Misol

div p {
  background-color: yellow;
}

Bolalar Tanlovchisi (>)

Bolalar tanlovchisi belgilangan elementning bolalari bo'lgan barcha elementlarni tanlaydi.

Quyidagi misol <div> elementi bolalari bo'lgan barcha <p> elementlarini tanlaydi:

Misol

div > p {
  background-color: yellow;
}

Qo'shni Aka-uka Tanlovchisi (+)

Qo'shni aka-uka tanlovchisi boshqa bir ma'lum elementdan keyin joylashgan elementni tanlash uchun ishlatiladi.

Aka-uka elementlar bir xil ota elementga ega bo'lishi kerak va "qo'shni" degani "darhol keyin" deganidir.

Quyidagi misol <div> elementlaridan darhol keyin joylashgan birinchi <p> elementini tanlaydi:

Misol

div + p {
  background-color: yellow;
}

Umumiy Aka-uka Tanlovchisi (~)

Umumiy aka-uka tanlovchisi belgilangan elementning keyingi aka-ukalarini tanlaydi.

Quyidagi misol <div> elementlarining keyingi aka-ukalari bo'lgan barcha <p> elementlarini tanlaydi:

Misol

div ~ p {
  background-color: yellow;
}

Barcha CSS Kombinator Tanlovchilari