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

နိဒါန်း

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>

view raw css_pseudo_class_selector(checked).html hosted with ❤ by GitHub

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>

view raw css_pseudo_class_selector(enabled_and_disabled).html hosted with ❤ by GitHub

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>

view raw css_pseudo_class_selector(focus).html hosted with ❤ by GitHub

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>

view raw css_pseudo_class_selector(required_and_optional).html hosted with ❤ by GitHub

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>

view raw css_pseudo_class_selector(valid_and_invalid).html hosted with ❤ by GitHub

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

Invalid

Valid

နိဂုံး

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

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

References

About Author

Alexander Wolfgang

Related

PHP Output Control (Output Buffering) အကြောင်း သိကောင်းစရာများ

PHP နှင့် Magic Method များ

Minimalist Web Design အခြေခံ - အပိုင်း(၁)

Assinged Tags

Categorized Under

Join Us On

Today Tech

ဒီနေ့ဟာ Apple က Steve Jobs တည်ထောင်ခဲ့တဲ့ NeXT ဆိုတဲ့ ကွန်ပျူတာနဲ့ Software ကုမ္ပဏီကို ၀ယ်ယူခဲ့တဲ့နေ့ ဖြစ်ပါတယ်

Latest

Android Typeface Changing Sample (Kotlin)

MWC 2018 မှာ မိတ်ဆက်သွားမယ့် Sony Xperia XZ2၊ Xperia XZ2 Compact တို့နဲ့ ပက်သတ်တဲ့ အချက်အလက်များနဲ့ စျေးနှုန်းများ ပေါက်ကြား

သက်တမ်းကုန်သွားတဲ့ Rainbow Apple Logo ကို Trademark ပြန်တင်ခဲ့တဲ့ Apple

Xiaomi ရဲ့ ပထမဆုံး Gaming စမတ်ဖုန်း “Blackshark” ရဲ့ Specification တစ်ချိူ့ AnTuTu ကနေတဆင့် ပေါက်ကြား

MWC 2018 မှာ မိတ်ဆက်လာဖွယ်ရှိတဲ့ Samsung Galaxy Tab S4 ရဲ့ အချက်အလက်များ ပေါက်ကြား

Popular

Xiaomi ဖုန်းတွေအတွက် China ROM ပေါ်မှာပဲ Google Play Store အလွယ်တကူသွင်းနည်း

Mi 6 စမတ်ဖုန်းမှာ နားကြပ်ပေါက်ဖြုတ်ပစ်ခဲ့တဲ့ အကြောင်းရင်းကို Xiaomi ရှင်းပြ

iPhone 8 နဲ့ Galaxy Note 8 ကို ကျော်လွန်ကာ DxOMark Mobile မှာ 97 Marks ရရှိသွားတဲ့ Huawei Mate 10 Pro

Huawei Nova 2i ကို အဆင့်မြှင့်တင်မှု အများအပြားပြုလုပ်ထားတဲ့ Huawei Nova 2s ထွက်ရှိ

Tags

	<!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>