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 တွေကို ကော်မာ (,) လေးခံပြီး အုပ်စုဖွဲ့ ရေးလို့ရပါတယ်။ ဒီလိုရေးတာက တစ်ခုချင်းစီကို ထပ်ခါထပ်ခါ ရေးနေစရာ မလိုတော့ဘဲ Code ကို ပိုရှင်းသွားစေပါတယ်။

/* 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) တွေကိုသာ ရွေးချယ်ပေးမှာပါ။ မြေးအဆင့်လိုမျိုး အတွင်းပိုင်း အရမ်းနက်တဲ့ Element တွေကိုတော့ ရွေးချယ်ပေးမှာ မဟုတ်ပါဘူး။

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

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

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

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

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

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

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

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

/* 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;
}