CSS Attribute ရွေးချယ်မှုများ
တိကျသော Attribute များဖြင့် HTML Elements များကို ပုံစံထုတ်ပါ။
တိကျသော attribute သို့မဟုတ် attribute တန်ဖိုးများပါရှိသော HTML element များကို ပုံစံသွင်းနိုင်သည်။
CSS [attribute] ရွေးချယ်မှု
[attribute]သတ်မှတ်ထားသော ရည်ညွှန်းချက်ဖြင့် အစိတ်အပိုင်းများကို ရွေးချယ်ရန်အတွက် ရွေးချယ်ကိရိယာကို အသုံးပြုသည် ။
အောက်ပါဥပမာသည် ပစ်မှတ်ရည်ညွှန်းချက်ဖြင့် <a> ဒြပ်စင်အားလုံးကို ရွေးချယ်သည်-
ဥပမာ
a[target] {
background-color: yellow;
}
CSS [attribute="value"] ရွေးချယ်မှု
[attribute="value"]သတ်မှတ်ထားသော ရည်ညွှန်းချက်နှင့် တန်ဖိုးရှိသော အစိတ်အပိုင်းများကို ရွေးချယ်ရန်အတွက် ရွေးချယ်ကိရိယာကို အသုံးပြုသည် ။
အောက်ပါဥပမာသည် target="_blank" attribute ဖြင့် <a> element အားလုံးကို ရွေးသည်-
ဥပမာ
a[target="_blank"] {
background-color: yellow;
}
CSS [attribute~="value"] ရွေးချယ်မှု
[attribute~="value"]သတ်မှတ်ထားသော စကားလုံးပါရှိသော ရည်ညွှန်းချက်တန်ဖိုးဖြင့် အစိတ်အပိုင်းများကို ရွေးချယ်ရန်အတွက် ရွေးချယ်ကိရိယာကို အသုံးပြုသည် ။
အောက်ဖော်ပြပါ ဥပမာသည် နေရာလွတ် ခြားထားသော စကားလုံးများစာရင်းပါရှိသော ခေါင်းစဉ် ရည်ညွှန်းချက်ဖြင့် ဒြပ်စင်အားလုံးကို ရွေးချယ်သည်၊ တစ်ခုမှာ "flower" ဖြစ်သည်-
ဥပမာ
[title~="flower"] {
border: 5px solid yellow;
}
အထက်ဖော်ပြပါ ဥပမာသည် title="flower", title="summer flower", နှင့် title="flower new", but not title="my-flower" သို့မဟုတ် title="flowers" တို့နှင့် ကိုက်ညီမည်ဖြစ်သည်။
CSS [attribute|="value"] ရွေးချယ်မှု
ရွေးချယ်မှုအား သတ်မှတ်ထားသော ရည်ညွှန်းချက်ဖြင့် ဒြပ်စင်များကို ရွေးချယ်ရန် အသုံးပြု သည် [attribute|="value"]၊ ၎င်း၏တန်ဖိုးသည် သတ်မှတ်ထားသော တန်ဖိုးအတိအကျဖြစ်နိုင်သည် သို့မဟုတ် တုံးတို (-) ဖြင့်လိုက်သော သတ်မှတ်ထားသောတန်ဖိုးကို အသုံးပြုသည်။
မှတ်ချက်- တန်ဖိုးသည် class="top" ကဲ့သို့ တစ်ခုတည်းဖြစ်ရမည်၊ သို့မဟုတ် class="top-text" ကဲ့သို့ တုံးတိုဖြင့် နောက်တွင် စာလုံးတစ်လုံးလုံး ဖြစ်ရပါမည်။
ဥပမာ
[class|="top"] {
background: yellow;
}
CSS [attribute^="value"] ရွေးချယ်မှု
ရွေးချယ် သည့် [attribute^="value"]ကိရိယာကို သတ်မှတ်ထားသောတန်ဖိုးဖြင့် စတင်သည့်တန်ဖိုးသည် သတ်မှတ်ထားသောတန်ဖိုးဖြင့် အစိတ်အပိုင်းများကို ရွေးချယ်ရန် အသုံးပြုသည်။
အောက်ပါဥပမာသည် "top" ဖြင့်စသည့် class attribute တန်ဖိုးဖြင့် အစိတ်အပိုင်းအားလုံးကို ရွေးချယ်သည်-
မှတ်ချက်- တန်ဖိုးသည် စကားလုံးတစ်လုံးလုံးဖြစ်ရန် မလိုပါ။
ဥပမာ
[class^="top"] {
background: yellow;
}
CSS [attribute$="value"] ရွေးကိရိယာ
[attribute$="value"]ရည်ညွှန်းချက်တန်ဖိုးသည် သတ်မှတ်ထားသော တန်ဖိုးတစ်ခုဖြင့် အဆုံးသတ်သည့် အစိတ်အပိုင်းများကို ရွေးချယ်ရန်အတွက် ရွေးချယ်ကိရိယာကို အသုံးပြုသည် ။
အောက်ပါဥပမာသည် "test" နှင့်အဆုံးသတ်သော class attribute တန်ဖိုးဖြင့် အစိတ်အပိုင်းအားလုံးကို ရွေးသည်-
မှတ်ချက်- တန်ဖိုးသည် စကားလုံးတစ်လုံးလုံးဖြစ်ရန် မလိုပါ။
ဥပမာ
[class$="test"] {
background: yellow;
}
CSS [attribute*="value"] ရွေးချယ်မှု
[attribute*="value"]ရည်ညွှန်းချက်တန်ဖိုးတွင် သတ်မှတ်ထားသောတန်ဖိုးပါရှိသော အစိတ်အပိုင်းများကို ရွေးချယ်ရန်အတွက် ရွေးချယ်ကိရိယာကို အသုံးပြုသည် ။
အောက်ပါဥပမာသည် "te" ပါရှိသော အတန်းရည်ညွှန်းတန်ဖိုးဖြင့် အစိတ်အပိုင်းအားလုံးကို ရွေးချယ်သည်-
မှတ်ချက်- တန်ဖိုးသည် စကားလုံးတစ်လုံးလုံးဖြစ်ရန် မလိုပါ။
ဥပမာ
[class*="te"] {
background: yellow;
}
စတိုင်လ်ပုံစံများ
အရည်အချင်းရွေးချယ်မှုစနစ်များသည် အတန်းအစား သို့မဟုတ် ID မပါဘဲ ပုံစံပုံစံပြုလုပ်ခြင်းအတွက် အသုံးဝင်နိုင်သည်-
ဥပမာ
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
အကြံပြုချက်- CSS ဖြင့် ဖောင်ပုံစံပုံစံလုပ်နည်းအတွက် နောက်ထပ်ဥပမာများအတွက် ကျွန်ုပ်တို့၏ CSS Forms Tutorial သို့ ဝင်ရောက်ကြည့်ရှုပါ။
CSS Attribute Selectors များအားလုံး
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |