CSS Selectors များအကြောင်း သိကောင်းစရာ အပိုင်း (၂)

date_range 09 October 2017

CSS Selectors များအကြောင်း သိကောင်းစရာ အပိုင်း (၂)

visibility 1780 Views

နိဒါန်း

                CSS Selectors ဆိုတာ ဘာတွေလဲ၊ ဘာကြောင့် အသုံးဝင်တာလဲ၊ ဘာလို့ သိထားဖို့လိုတာလဲ၊ စတာတွေအပြင်၊ Selectors တစ်ချို့အကြောင်းကို အပိုင်း (၁) မှာတုန်းက ပြောပြခဲ့ပါတယ်။ အခု အပိုင်း (၂) မှာတော့ CSS Pseudo Class Selector ထဲမှာ ကျန်နေသေးတဲ့ Pseudo Classes တွေအကြောင်းကို ဆက်ပြောသွားမှာပါ။

Pseudo Classes For <form> Elements 

                အပိုင်း (၁) မှာတုန်းက CSS Pseudo Classes တွေထဲကမှ <a> Elements (Hyperlinks) တွေနဲ့ သက်ဆိုင်တဲ့ Pseudo Classes တွေကို သီးသန့်ခွဲထုတ်ပြီး ပြောပြခဲ့ပါတယ်။ အခုကတော့ <input> Elements တွေနဲ့ သက်ဆိုင်တဲ့ Pseudo Classes တွေအကြောင်းကို ပြောသွားမှာပါ။

:checked

                ဒီ Pseudo Class ကတော့ <input> Element Types တွေထဲကမှ radio, checkbox တို့နဲ့ပဲ သက်ဆိုင်မှာပါ။ Radio Button လေးတစ်ခုကို ရွေးချယ်ပြီးသွားတဲ့ အခြေအနေ၊ ဒါမှမဟုတ်ရင်လည်း Checkbox လေးတစ်ခုကို ရွေးချယ်ပြီးသွားတဲ့ အခြေအနေမျိုးမှာ ဒီ Pseudo Class ကို သုံးပြီး CSS Styles တွေ ထည့်လို့ရမှာပါ။

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Psuedo Class Selector (:checked)</title>
<style>
h1 {
color: #00bdc4;
border-bottom: 1px solid #bdbdbd;
padding-bottom: 20px;
}
input {
margin: 30px;
}
input + label {
background-color: #9e9e9e;
border-radius: 2px;
padding: 20px;
color: #f5f5f5;
}
input:checked + label {
background-color: #00bcd4;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div>
<h1>CSS Psuedo Class Selector (:checked)</h1>
<form action="">
<input type="checkbox" name="html">
<label for="html">HTML</label><br>
<input type="checkbox" name="css">
<label for="css">CSS</label><br>
<input type="checkbox" name="js">
<label for="js">JavaScript</label><br>
</form>
</div>
</body>
</html>

                Code ထဲမှာတော့ ဥပမာအတွက် ပိုပြီးမြင်သာထင်သာ ရှိသွားအောင် Adjacent Selector ကို ထည့်သုံးထားပါတယ် (ဒီ Selector လေးအကြောင်းကို နောက်ပိုင်းမှာ ပြောပြသွားပါ့မယ်)။ 

                Code ကို Run ကြည့်လိုက်မယ်ဆိုရင်တော့ ပထမဆုံး Checkbox သုံးခုကို တွေ့ရမှာပါ။ အဲ့ဒီ Checkbox သုံးခုထဲကနေ တစ်ခုခုကို Check လုပ်ကြည့်လိုက်မယ်ဆိုရင်တော့ အောက်မှာပြထားတဲ့အတိုင်း Styles လေးတွေ ပြောင်းသွားမယ်၊ User အနေနဲ့ ဘယ်ဟာကို Check လုပ်လိုက်တယ်ဆိုတာကို သိသိသာသာလေး မြင်ရမယ်ပေါ့။


:enabled and :disabled

                ဒီ Pseudo Class နှစ်ခုကိုတော့ <input> Elements တွေ Enable ဖြစ်နေတဲ့ အခြေအနေနဲ့ Disable ဖြစ်နေတဲ့ အခြေအနေမျိုးတွေမှာ Styles တွေထည့်ချင်တဲ့အခါမှာ အသုံးပြုနိုင်ပါတယ်။ အောက်မှာ Code လေးရေးကြည့်ရအောင်ဗျာ …

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Psuedo Class Selector (:enabled and :disabled)</title>
<style>
h1 {
color: #00bdc4;
border-bottom: 1px solid #bdbdbd;
padding-bottom: 20px;
}
input:enabled {
background: #00bcd4;
color: #f5f5f5;
}
input:disabled {
background: #212121;
color: #f5f5f5;
}
</style>
</head>
<body>
<div>
<h1>CSS Psuedo Class Selector (:enabled and :disabled)</h1>
<form action="">
First Name: <input type="text" value="Bruce"><br>
Last Name: <input type="text" value="Wayne"><br>
Code Name: <input type="text" disabled value="Batman">
</form>
</div>
</body>
</html>

                Browser မှာ Run ကြည့်မယ်ဆိုရင်တော့ Enable ဖြစ်နေတဲ့ <input> Element နှစ်ခုကို နောက်ခံအပြာရောင်နဲ့ တွေ့ရမှာဖြစ်ပြီး Disable ဖြစ်နေတဲ့ <input> Element ကိုတော့ နောက်ခံအမည်းရောင်နဲ့ တွေ့ရမှာပါ။ ထုံးစံအတိုင်း Enable ဖြစ်နေတဲ့ <input> Element နှစ်ခုမှာတော့ Cursor ချလို့ရပေမယ့် Disable ဖြစ်နေတဲ့ကောင်ကတော့ Cursor ချလို့ မရဘူးပေါ့။

 

                ဒီ Pseudo Class နှစ်ခုထဲမှာ အသုံးများတာကတော့ :disabled ပဲ ဖြစ်ပါတယ်။ User က Form ဖြည့်တဲ့အခါ ပထမအဆင့်မှာ မှားဖြည့်မိလို့ ဒုတိယအဆင့်ကို ဆက်ပြီးမဖြည့်နိုင်အောင် JS နဲ့ လုပ်လိုက်တဲ့အခါမျိုးမှာ User အနေနဲ့ Disable ဖြစ်သွားတဲ့ <input> Element ကို သိသွားအောင် Style လေးတွေ သတ်မှတ်ဖို့အတွက် :disabled ကို သုံးလေ့ရှိပါတယ်။

:focus

                User က Form ဖြည့်ဖို့အတွက် <input> Element တစ်ခုခုမှာ Cursor ထောက်လိုက်ပြီး Focus ယူလိုက်တယ်ပေါ့။ အဲ့လိုမျိုး <input> Element တစ်ခုခုကို Focus ဖြစ်နေတဲ့ အခြေအနေမျိုးမှာ Styles လေးတွေ ထည့်ချင်တယ်ဆိုရင် :focus ကို သုံးရမှာပါ။ အောက်က Code လေးကို တစ်ချက်လေ့လာလိုက်ရအောင် …

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Psuedo Class Selector (:focus)</title>
<style>
h1 {
color: #00bdc4;
border-bottom: 1px solid #bdbdbd;
padding-bottom: 20px;
}
input:focus {
background: #00bcd4;
color: #f5f5f5;
}
</style>
</head>
<body>
<div>
<h1>CSS Psuedo Class Selector (:focus)</h1>
<form action="">
First Name: <input type="text" value="Bruce"><br>
Last Name: <input type="text" value="Wayne"><br>
</form>
</div>
</body>
</html>

                Run ပြီးပြီးချင်းတော့ <input> Element လေး နှစ်ခုပဲတွေ့ရမှာပါ။ ဒါပေမယ့် တစ်ခုခုကို Focus ပေးလိုက်မယ်ဆိုရင်တော့ အောက်မှာပြထားသလိုပဲ Styles လေးတွေ ပြောင်းသွားတာကို တွေ့ရမှာ ဖြစ်ပါတယ်။ ဒီ Pseudo Class ကိုတော့ User က Form ဖြည့်နေတဲ့အချိန်မှာ ဘယ်ဟာကို ဖြည့်နေလည်းဆိုတာကို သိဖို့အတွက် Animation လေးတွေနဲ့တကွ ပြသနိုင်ဖို့အတွက် အသုံးပြုကြပါတယ်။


:required and :optional

                ကျနော်တို့အနေနဲ့ User တစ်ယောက်ဆီကနေ Information တောင်းတဲ့အခါ အရေးကြီး ဖြည့်ရမယ့် <input> မှာ required ဆိုတဲ့ Attribute လေး ထည့်ပေးလေ့ရှိပြီး၊ အရေးမကြီး ဖြည့်ရမယ့် <input> မှာတော့ required ဆိုတဲ့ Attribute ကို မထည့်ပါဘူး။

                :required ကတော့ required ဆိုတဲ့ Attribute လေးပါတဲ့ <input> Elements တွေကို Select လုပ်နိုင်ဖို့ အသုံးပြုပြီး၊ :optional ကတော့ required ဆိုတဲ့ Attribute မပါတဲ့ <input> Elements တွေကို Select လုပ်နိုင်ဖို့ အသုံးပြုပါတယ်။ ဥပမာလေး ကြည့်လိုက်ရအောင် ….

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Psuedo Class Selector (:required and :optional)</title>
<style>
h1 {
color: #00bdc4;
border-bottom: 1px solid #bdbdbd;
padding-bottom: 20px;
}
input:required {
background: #00bcd4;
color: #f5f5f5;
}
input:optional {
background: #212121;
color: #f5f5f5;
}
</style>
</head>
<body>
<div>
<h1>CSS Psuedo Class Selector (:required and :optional)</h1>
<form action="">
First Name: <input type="text" value="Bruce" required><br>
Last Name: <input type="text" value="Wayne"><br>
</form>
</div>
</body>
</html>

                Run လိုက်မယ်ဆိုရင် required Attribute ပါတဲ့ ပထမဆုံး <input> Element နဲ့ required Attribute မပါတဲ့ ဒုတိယ <input> Element တို့ Styles တွေ ကွဲပြားပြီး ထွက်လာတာကို တွေ့ရမှာပါ။ ဒီနှစ်ခုကတော့ အသုံးမများပါဘူး။ အသုံးလည်း သိပ်မဝင်ပါဘူး။ ဒါပေမယ့် required ဆိုတဲ့ Attribute လေးကိုတော့ မှတ်ထားဖို့ လိုမှာပါ။


:valid and :invalid

                :valid ကိုတော့ User ဖြည့်လိုက်တဲ့ Information က မှန်တယ်ဆိုရင် ပြသပေးမယ့် Styles တွေ သတ်မှတ်ပေးဖို့ အသုံးပြုနိုင်ပြီး :invalid ကတော့ Information မှားသွားတဲ့ အခြေအနေမျိုးအတွက် သုံးပါတယ်။ Example Code လေးရေးကြည့်မယ်ဗျာ …

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Psuedo Class Selector (:valid and :invalid)</title>
<style>
h1 {
color: #00bdc4;
border-bottom: 1px solid #bdbdbd;
padding-bottom: 20px;
}
input:valid {
background-color: #00bcd4;
color: #f5f5f5;
}
input:invalid {
background-color: #f44336;
color: #f5f5f5;
}
</style>
</head>
<body>
<div>
<h1>CSS Psuedo Class Selector (:valid and :invalid)</h1>
<form action="">
Email Address: <input type="email"><br>
</form>
</div>
</body>
</html>

                ဒီ Pseudo Classes နှစ်ခုကိုတော့ <input> Elements တိုင်းမှာ သုံးလို့ရမှာတော့ မဟုတ်ပါဘူး။ Limitations တွေပါရှိမယ့် email, numbers စတာတွေမှာပဲ သုံးလို့ရပါတယ်။ ကျနော်တို့ Code ကို Run လိုက်မယ်ဆိုရင်တော့ Email Address တစ်ခုခုကို မဖြည့်မချင်း background-color အနီရောင် ပြပေးပြီး၊ Email Address မှန်ကန်ရင်တော့ background-color အပြာရောင် ပြပေးမယ့် <input> Element လေးတစ်ခုကို တွေ့ရမှာ ဖြစ်ပါတယ်။


Invalid


Valid

နိဂုံး

                အပိုင်း (၂) ကတော့ ဒီလောက်ပဲ ဖြစ်ပါတယ်။ နောက်တစ်ပါတ်မှာတော့ ကျနော်တို့အနေနဲ့ CSS Pseudo Elements တွေ အကြောင်းကို ဆက်လက်လေ့လာသွားမှာ ဖြစ်ပါတယ်။

References
TutsPlus SidePoint W3Schools
About Author
Assinged Tags
Web Development CSS CSS3 Web Design Web Design Tutorials CSS Selectors CSS Tutorials
Categorized Under
Programming

Join Us On

Facebook
YouTube
Twitter
GooglePlus
TechX RSS Feed