CSS Combinators
CSS Combinators
Combinator သည် Selectors များကြား ဆက်စပ်မှုကို ရှင်းပြပေးသည့် အရာတစ်ခုဖြစ်သည်။
CSS ရွေးချယ်မှုတွင် ရိုးရှင်းသော ရွေးချယ်မှုတစ်ခုထက်ပို၍ ပါဝင်နိုင်သည်။ ရိုးရှင်းသောရွေးချယ်မှုများကြားတွင်၊ ကျွန်ုပ်တို့သည် ပေါင်းစပ်ကိရိယာတစ်ခု ထည့်သွင်းနိုင်သည်။
CSS တွင် မတူညီသောပေါင်းစပ်သူလေးမျိုးရှိသည်။
- ဆင်းသက်သည့်ရွေးချယ်မှု (space)
- ကလေးရွေးချယ်မှု (>)
- ကပ်လျက် ပေါက်ဖော် ရွေးချယ်သူ (+)
- ယေဘူယျ မွေးချင်းရွေးချယ်သူ (~)
ဆင်းသက်ရွေးချယ်သူ
ဆက်ခံရွေးချယ်ပေးသူသည် သတ်မှတ်ထားသော ဒြပ်စင်တစ်ခု၏ ဆင်းသက်လာသော အစိတ်အပိုင်းအားလုံးကို ကိုက်ညီသည်။
အောက်ပါဥပမာသည် <p> ဒြပ်စင်များအတွင်းရှိ <div> ဒြပ်စင်များအားလုံးကို ရွေးချယ်သည်-
ဥပမာ
div p {
background-color: yellow;
}
ကလေးရွေးချယ်မှု (>)
ကလေးရွေးချယ်မှုစနစ်သည် သတ်မှတ်ထားသော ဒြပ်စင်တစ်ခု၏ သားသမီးများဖြစ်သော အစိတ်အပိုင်းအားလုံးကို ရွေးချယ်သည်။
အောက်ပါနမူနာသည် <p> ဒြပ်စင်တစ်ခု၏ ကလေးများဖြစ်သော <p> ဒြပ်စင်အားလုံးကို ရွေးချယ်သည်-
ဥပမာ
div > p {
background-color: yellow;
}
ကပ်လျက် ပေါက်ဖော်ရွေးချယ်သူ (+)
အခြား သီးခြားဒြပ်စင်ပြီးနောက် တိုက်ရိုက်ရှိသော ဒြပ်စင်ကို ရွေးချယ်ရန် ကပ်လျက်သားပေါက်ဖော် ရွေးချယ်မှုအား အသုံးပြုသည်။
မွေးချင်းဒြပ်စင်များတွင် တူညီသော ပင်မဒြပ်စင်များ ပါရှိရမည်ဖြစ်ပြီး "ကပ်လျက်" ဆိုသည်မှာ "ချက်ခြင်းနောက်လိုက်ခြင်း" ကို ဆိုလိုသည်။
အောက်ဖော်ပြပါ ဥပမာသည် <div> ဒြပ်စင်များပြီးနောက် ချက်ချင်းထည့်သွင်းထားသော ပထမဆုံး <p> ဒြပ်စင်ကို ရွေးချယ်သည်-
ဥပမာ
div + p {
background-color: yellow;
}
အထွေထွေပေါက်ဖော်ရွေးချယ်သူ (~)
ယေဘူယျအားဖြင့် မွေးချင်းရွေးချယ်သူသည် သတ်မှတ်ထားသော ဒြပ်စင်တစ်ခု၏ နောက်မွေးချင်းများဖြစ်သည့် အစိတ်အပိုင်းအားလုံးကို ရွေးချယ်သည်။
အောက်ဖော်ပြပါ ဥပမာသည် <div> ဒြပ်စင်များ၏ နောက်မွေးချင်းများဖြစ်သည့် <p> အစိတ်အပိုင်းအားလုံးကို ရွေးသည်-
ဥပမာ
div ~ p {
background-color: yellow;
}
CSS Combinator Selectors များအားလုံး
Selector | Example | Example description |
---|---|---|
element element | div p | Selects all <p> elements inside <div> elements |
element>element | div > p | Selects all <p> elements where the parent is a <div> element |
element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |