Skip to content
Takkatho University Takkatho University တက္ကသိုလ် (Takkatho) - Myanmar Programming Learning Platform
GitHub

Combinators (Selector များ ချိတ်ဆက်ခြင်း)

အရင်အပိုင်းမှာ Selector တစ်ခုတည်းနဲ့ ရွေးတာကို လေ့လာခဲ့ပါတယ်။ တကယ့် project တွေမှာတော့ “ဒီ box အထဲက link တွေကိုပဲ ပြင်ချင်တယ်” လိုမျိုး တိတိကျကျ ရွေးဖို့ လိုလာပါတယ်။ အဲဒီအခါ Selector တွေကို ပေါင်းစပ်ပေးတဲ့ Combinator တွေကို သုံးရပါတယ်။

1. Grouping (အုပ်စုဖွဲ့ခြင်း) — ကော်မာ ,

Section titled “1. Grouping (အုပ်စုဖွဲ့ခြင်း) — ကော်မာ ,”

Style တူတူ ပေးချင်တဲ့ Selector တွေကို ကော်မာ (,) ခံပြီး တစ်စုတည်း ရေးလို့ရပါတယ်။ တစ်ခုချင်း ထပ်ခါထပ်ခါ ရေးနေစရာ မလိုတော့ပါဘူး။

/* h1, h2, h3 သုံးခုလုံးကို တစ်ပြိုင်တည်း ပြင်တယ် */
h1, h2, h3 {
  font-family: "Padauk", sans-serif;
  color: #333;
}

2. Descendant Combinator (အတွင်းသားများ) — space

Section titled “2. Descendant Combinator (အတွင်းသားများ) — space ”

Selector နှစ်ခုကြားမှာ space (ကွက်လပ်) ခြားရေးရင် “ပထမ element ရဲ့ အတွင်းမှာ ရှိသမျှ” ဒုတိယ element ကို ဆိုလိုပါတယ်။ ဘယ်နှဆင့် နက်နက် ရွေးပေးပါတယ်။

<nav class="menu">
  <ul>
    <li><a href="#">ပင်မ</a></li>
    <li><a href="#">ဝန်ဆောင်မှု</a></li>
  </ul>
</nav>
/* .menu အတွင်းက <a> အားလုံး — ဘယ်လောက်နက်နက် */
.menu a {
  color: green;
  text-decoration: none;
}

3. Child Combinator (တိုက်ရိုက်သားများ) — >

Section titled “3. Child Combinator (တိုက်ရိုက်သားများ) — >”

> သုံးရင် တိုက်ရိုက် သားသမီး (direct child) ကိုသာ ရွေးပါတယ်။ မြေးအဆင့် (နက်နက်) ကို မရွေးပါဘူး။

/* ul ရဲ့ တိုက်ရိုက်သား li တွေကိုသာ */
ul > li {
  list-style: square;
}

4. Adjacent Sibling (ကပ်လျက် ညီအစ်ကို) — +

Section titled “4. Adjacent Sibling (ကပ်လျက် ညီအစ်ကို) — +”

Element နှစ်ခုက ညီအစ်ကို (level တူ) ဖြစ်ပြီး၊ ရှေ့ကတစ်ခုရဲ့ နောက်မှာ ကပ်လျက် ရှိတဲ့ element တစ်ခုတည်းကို ရွေးပါတယ်။

/* ခေါင်းစဉ် h2 ရဲ့ ချက်ချင်းနောက်က စာပိုဒ်ကိုသာ */
h2 + p {
  margin-top: 0;
  color: gray;
}

5. General Sibling (ညီအစ်ကို အားလုံး) — ~

Section titled “5. General Sibling (ညီအစ်ကို အားလုံး) — ~”

+ နဲ့ ဆင်တူပေမယ့်၊ ကပ်လျက် တစ်ခုတည်း မဟုတ်ဘဲ နောက်က ညီအစ်ကို အားလုံး ကို ရွေးပါတယ်။

/* h2 နောက်မှာ ရှိသမျှ စာပိုဒ် p အားလုံး */
h2 ~ p {
  color: gray;
}
CSS Combinators — element များ၏ ဆွေမျိုးတော်စပ်ပုံနှင့် combinator များ

6. Attribute Selector (Attribute အလိုက် ရွေးခြင်း) — [ ]

Section titled “6. Attribute Selector (Attribute အလိုက် ရွေးခြင်း) — [ ]”

Element ရဲ့ attribute တန်ဖိုးပေါ်မူတည်ပြီး ရွေးလို့ရပါတယ်။ Form တွေမှာ အရမ်း အသုံးဝင်ပါတယ်။

/* type="text" ဖြစ်တဲ့ input တွေကိုသာ */
input[type="text"] {
  border: 1px solid #ccc;
}


/* type="submit" ဖြစ်တဲ့ button */
input[type="submit"] {
  background-color: blue;
  color: white;
}