CSS Combinators

CSS-д дөрвөн өөр комбинатор байдаг. Комбинатор нь сонгогчдын хоорондын харилцааг тайлбарладаг.
Сонгогч нь нэгээс олон сонгогчийг агуулж болох бөгөөд энгийг сонгогчдын хооронд бид комбинаторыг нэмж өгснөөр сонгогчийн хооронд харилцаа би болно.

• descendant selector (Хоосон зай)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector(~)

Удамшил сонгогч /Descendant Selector/

descendant selector нь удамшлыг сонгогч гэсэн утгатай бөгөөд элемент нь дотроо өөр нэгэн элемент агуулж байвал бид түүнийг ЭЦЭГ элемент, агуулагдаж буй элементийг ХҮҮ элемент гэдэг. Үүнийг эцэг хүүгийн удамшил гэж товчхондоо ойлгож болно.
Дараах жишээ нь <div> элемент доторх бүх <p> элементүүдийг сонгож байна.

<style>
div p {
  background-color: #3f9ce8;
  font-size: 18px;
}
</style>

Хүү сонгогч /Child Selector/

Child Selector нь тухайн элементийн зөвхөн хүү элементүүдийг л сонгох болно.
Доорх жишээ нь <div> элементийн хүү элемент болох бүх <p> элементүүдийг сонгох болно.

<style>
div > p {
  background-color: yellow;
  font-size: 16px;
}
</style>

Хөрш сонгогч /Adjacent Sibling Selector/

Adjacent Sibling Selector нь тухайн элементийн хамгийн ойр байгаа хөрш элементийг сонгох болно. Хөрш элементийг сонгогчид зааж өгсөн байх ёстойг анхаарна уу.
Доорх жишээ нь <div> элементийн яг дараагийн <p> элементүүдийг сонгох авах болно. Хэрэв дунд нь өөр элемент байвал хөрш гэж үзэхгүй. Иймд туршиж үзээрэй.

<style>
div + p {
  background-color: red;
  font-size: 16px;
}
</style>

Ерөнхий хөрш сонгогч /General Sibling Selector/

General Sibling Selector нь тухайн элементээс ерөнхий хөрш элементийг бүгдийн сонгох болно. Доорх жишээ нь <div> элементээс хойших бүх ерөнхий хөрш <p> элементүүдийг сонгон авах болно.

<style>
div ~ p {
  background-color: red;
  font-size: 16px;
}
</style>

Сэтгэгдэлүүд