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

နိဒါန်း

CSS ကို စတင်လေ့လာတော့မယ်ဆိုရင်၊ ဒါမှမဟုတ် လေ့လာပြီးလို့ Project တစ်ချို့ကို အစမ်းသဘောမျိုး လုပ်ကြည့်နေပြီဆိုရင်၊ ချန်ထားခဲ့လို့ မရတာက CSS Selectors တွေပါ။ ဘာလို့လဲဆိုတော့ CSS ရဲ့ ရည်ရွယ်ချက်မှာကိုက CSS Selectors တွေက ထိပ်ဆုံးက ပါနေလို့ပါပဲ။

CSS ရဲ့ ရည်ရွယ်ချက်က ရှင်းပါတယ်။ Website ကို ရုပ်ထွက်လှသွားအောင် မိတ်ကပ်လိမ်းပေးဖို့ပါ။ ဒါပေမယ့် မိတ်ကပ်လိမ်းတယ်ဆိုတဲ့နေရာမှာ ဘယ်နေရာကို မိတ်ကပ်လိမ်းမှာလည်း ဆိုတာကို ရွေးချယ်ပေးဖို့ကလည်း အရေးကြီးပါတယ် (မှတ်မှတ်ရရ ဒီဥပမာလေးက ကျနော့်ဆရာ ဆရာစိုးသီဟနောင် ကျနော့်ကို ပြောပြခဲ့တာလေးပါ)။

ဘယ်နေရာကို ရွေးချယ်မလဲ ဆိုပြန်တော့လည်း Project တစ်ခုလုံးမှာ ရှိသမျှ Elements တိုင်းကို id name ဒါမှမဟုတ် class name တွေပေးပြီး Select လုပ်နေတော့လည်း မဟုတ်ပြန်ပါဘူး။ ဒီတော့ CSS Selectors တွေကို လိုတဲ့နေရာမှာ လိုသလိုအသုံးချတတ်ပြီး ရိုးရိုးရှင်းရှင်းနဲ့ မှန်မှန်ကန်ကန် Select လုပ်တတ်ဖို့၊ Target ပေးတတ်ဖို့ကလည်း အရေးကြီးပါသေးတယ်။

CSS Selectors တွေက ဘာတွေလဲ?

CSS Selectors တွေဆိုတာ “Website ကို မိတ်ကပ်လိမ်းတဲ့နေရာမှာ ဘယ်နေရာကို မိတ်ကပ်လိမ်းမှာလည်းလို့ ရွေးချယ်၊ သတ်မှတ်ပေးနိုင်တဲ့ Selectors တွေ” လို့ ဥပမာ ပေးရမှာ ဖြစ်ပါတယ်။ CSS နဲ့ ပြောမယ်ဆိုရင်တော့ Styles တွေ သတ်မှတ်ချင်တဲ့ Elements တွေကို သတ်မှတ်ပေးနိုင်တဲ့ (ဒါမှမဟုတ်) ခေါ်ယူပေးနိုင်တဲ့ Selectors တွေကို CSS Selectors တွေလို့ ခေါ်ဆိုပါတယ်။

ဒီ Lesson တွေမှာတော့ CSS Selectors တွေ တစ်ခုချင်းစီကို အသုံးပြုပုံနှင့်တကွ ပြောပြသွားမှာပါ။ ဒါပေမယ့် ဒီနေရာမှာ တစ်ခုသတိထားရမှာက တစ်ချို့ CSS Selectors တွေက CSS 3 မှာမှ ပါဝင်လာတာ ဖြစ်တဲ့အတွက် Browser တိုင်းမှာတော့ အလုပ်လုပ်မှာ မဟုတ်ပါဘူး။ ဒါကြောင့် တစ်ချို့ Selectors တွေကို စမ်းလုပ်ကြည့်ချင်တယ် ဆိုရင်တော့ မိမိ Browser က Up-To-Date ဖြစ်နေမှ ရပါမယ်။

Universal Selector

ဒီကောင်ကတော့ ရှင်းပါတယ်။ အကုန်လုံးကို Select လုပ်တဲ့ကောင်ပေါ့။ ဒီကောင်လေးကတော့ ကျနော်တို့ Browsers တွေမှာ ပါဝင်တဲ့ Default Styles တွေကို Reset လုပ်ပစ်တဲ့ အခါမျိုးမှာ သုံးလေ့ရှိပါတယ်။ မိမိ Project အတွက် normalize.css သုံးဖူးတဲ့ သူတွေဆို ပိုသိပါလိမ့်မယ်။ အောက်မှာ Example Code လေး ကြည့်လိုက်ရအောင် …

      
        <!DOCTYPE html>
      
        <html lang="en">
      
        <head>
      
         <meta charset="UTF-8">
      
         <title>CSS Selectors</title>
      
         <style>
      
           * {
      
             padding: 20px;
      
             border: 1px solid #212121;
      
            }
      
          </style>
      
        </head>
      
        <body>
      
          <h1>CSS Universal Selector</h1>
      
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos quos quaerat sunt eius numquam repellendus itaque labore voluptatum impedit, ipsum cumque eum iure necessitatibus distinctio est incidunt? Nam possimus, mollitia.</p>
      
          <ul>
      
            <li>Something</li>
      
            <li>Something</li>
      
            <li>Something</li>
      
            <li>Something</li>
      
          </ul>
      
        </body>
      
        </html>

view raw css_universal_selector.html hosted with ❤ by GitHub

Code က အတိုင်းဆိုရင် body ထဲမှာ h1, p, ul, li စတဲ့ Elements လေးတွေ ရှိမယ်ပေါ့။ ဒါပေမယ့် CSS Universal Selector ကို အသုံးပြုပြီး padding နဲ့ border ကို Style လေးတွေ ထည့်ပေးလိုက်တဲ့ အခါမှာတော့ Universal Selector က body ထဲမှာရှိတဲ့ Elements တွေအပြင်၊ body နဲ့ html ကိုပါ Select လုပ်သွားတယ်ဆိုတာကို တွေ့ရမှာဖြစ်ပါတယ်။

နောက်ပြီး ဒီ Selector လေးကို Child Selector အနေနဲ့လည်း အသုံးပြုလို့ရပါသေးတယ်။ ဆိုတော့၊ အောက်မှာပြထားတဲ့ Code လေးကို လေ့လာကြည့်ရအောင် …

      
        <!DOCTYPE html>
      
        <html lang="en">
      
        <head>
      
          <meta charset="UTF-8">
      
          <title>CSS Universal Selector (Child Selector)</title>
      
          <style>
      
            #wrapper * {
      
              padding: 20px;
      
              margin: 20px;
      
             background-color: #00bdc4;
      
             color: #fafafa;
      
           }
      
         </style>
      
        </head>
      
        <body>
      
         <div id="wrapper">
      
           <h1>CSS Universal Selector (Child Selector)</h1>
      
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos quos quaerat sunt eius numquam repellendus itaque labore voluptatum impedit, ipsum cumque eum iure necessitatibus distinctio est incidunt? Nam possimus, mollitia.</p>
      
           <ul>
      
             <li>Something</li>
      
             <li>Something</li>
      
             <li>Something</li>
      
             <li>Something</li>
      
           </ul>
      
         </div>
      
        </body>
      
        </html>

view raw css_universal_selector_child_selector.html hosted with ❤ by GitHub

ဒုတိယ Code မှာတော့ ကျနော့်အနေနဲ့ ပထမ Code မှာတုန်းက body ထဲမှာပါခဲ့တဲ့ Elements တွေ အကုန်လုံးကို div တစ်ခုထဲထည့်လိုက်ပါတယ်။ div မှာလည်း wrapper ဆိုတဲ့ id လေး တစ်ခုပါလာပါတယ်။ ဒီ Code ထဲမှာတော့ * နဲ့ Element တွေအကုန်လုံးကို Select မလုပ်တော့ပဲ #wrapper ထဲက Elements တွေကိုပဲ Select လုပ်ထားပါတယ်။

ဒါကြောင့် ကျနော်တို့ သတ်မှတ်လိုက်တဲ့ Styles တွေဟာ body နဲ့ html တို့အပေါ်မှာ သက်ရောက်မှုရှိတော့မှာ မဟုတ်ပေမယ့် #wrapper ထဲက Elements တွေကတော့ အောက်မှာပြထားသလိုပဲ Styles တွေ ပြောင်းကုန်မှာ ဖြစ်ပါတယ်။

ဒါပေမယ့် ဒီ Selector လေးက Browser ကို Weight အရမ်းပေးတာကြောင့် Browsers တွေမှာ ပါဝင်တဲ့ Default Styles တွေကို Reset လုပ်ပစ်တဲ့ အခါမျိုးကလွဲပြီး နေရာတစ်ကာ သုံးဖို့တော့ မသင့်တော်ပါဘူး။

ID Selector

ဒီ Selector ကိုတော့ CSS ကို စလေ့လာပြီဆိုထဲက ထိတွေ့ခဲ့ရမှာပါ။ id ပါဝင်တဲ့ Element တစ်ခုကို Select လုပ်ချင်တယ်ဆိုရင် # ဆိုတဲ့ Symbol ရဲ့နောက်မှာ id name လိုက်ပြီး Select လုပ်နိုင်ပါတယ်။ ဒီတော့ Code လေး နည်းနည်း ရေးကြည့်ရအောင် …

      
        <!DOCTYPE html>
      
        <html lang="en">
      
        <head>
      
          <meta charset="UTF-8">
      
          <title>CSS ID Selector</title>
      
          <style>
      
            #container {
      
              padding: 20px;
      
              margin: 20px;
      
             border: 1px solid #00bdc4;
      
           }
      
         </style>
      
        </head>
      
        <body>
      
         <div id="container">
      
           <h1>CSS ID Selector</h1>
      
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos quos quaerat sunt eius numquam repellendus itaque labore voluptatum impedit, ipsum cumque eum iure necessitatibus distinctio est incidunt? Nam possimus, mollitia.</p>
      
           <ul>
      
             <li>Something</li>
      
             <li>Something</li>
      
             <li>Something</li>
      
             <li>Something</li>
      
           </ul>
      
         </div>
      
        </body>
      
        </html>

view raw css_id_selector.html hosted with ❤ by GitHub

Code ထဲမှာတော့ #container ဆိုပြီး div တစ်ခုကို Select လုပ်ထားပါတယ်။ ဒါကြောင့် body, html, h1, p, ul, li စတဲ့ Elements တွေကို Styles တွေ ထည့်ပေးသွားမှာ မဟုတ်ပဲ Select လုပ်ထားတဲ့ div#container လေးကိုပဲ Styles တွေ ထည့်ပေးသွားမှာပါ။

Elements တိုင်းကို ID Selector နဲ့ Select မလုပ်သင့်ပါဘူး။ ဘာလို့လဲဆိုတော့ ID Selector က ပြန်လည်အသုံးပြုဖို့ မသင့်တာကြောင့်ပါ။ နောက်ပြီး Element တစ်ခုကို id name နှစ်ခု ပေးထားလို့တော့ ရပါတယ်။ ဒါပေမယ့် Browser ကတော့ ပထမ id name ကိုပဲ Render လုပ်သွားမှာ ဖြစ်ပါတယ်။

Class Selector

ID Selector လိုမျိုးမဟုတ်ပဲ ပြန်လည်အသုံးပြုလို့ ရနိုင်တာကြောင့် Developer တွေ ဖောဖောသီသီ သုံးကြရတဲ့ Selector တစ်ခုပါ။ ဒီ Selector ကို ဘယ်လိုအသုံးပြုမလဲ အောက်က Code မှာ ကြည့်လိုက်ရအောင် …

      
        <!DOCTYPE html>
      
        <html lang="en">
      
        <head>
      
          <meta charset="UTF-8">
      
          <title>CSS Class Selector</title>
      
          <style>
      
            .container {
      
              padding: 20px;
      
              margin: 20px;
      
             background-color: #00bdc4;
      
             color: #fafafa;
      
             border-radius: 2px;
      
           }
      
         </style>
      
        </head>
      
        <body>
      
         <div class="container">
      
           <h1>CSS Class Selector</h1>
      
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos quos quaerat sunt eius numquam repellendus itaque labore voluptatum impedit, ipsum cumque eum iure necessitatibus distinctio est incidunt? Nam possimus, mollitia.</p>
      
           <ul>
      
             <li>Something</li>
      
             <li>Something</li>
      
             <li>Something</li>
      
             <li>Something</li>
      
           </ul>
      
         </div>
      
        </body>
      
        </html>

view raw css_class_seletor.html hosted with ❤ by GitHub

အပေါ်က Code ကို Run ကြည့်မယ်ဆိုရင် အောက်မှာပြထားတဲ့ Result လေး ထွက်လာမှာပါ။ ရှင်းရှင်းပြောရရင် ID Selector နဲ့ Class Selector က ပြန်လည်အသုံးပြုလို့ ရတာ၊ မရတာကလွဲပြီး သဘောတရားချင်းကတော့ အတူတူပဲ ဖြစ်ပါတယ်။

Element Type Selector

အတိုကောက် အနေနဲ့လည်း “Type Selector” လို့ ခေါ်ကြပါသေးတယ်။ HTML မှာ ပါဝင်တဲ့ Elements တွေကို နာမည်နဲ့ တိုက်ရိုက်လှမ်းခေါ်လို့ရတဲ့ Selector တစ်ခုပဲ ဖြစ်ပါတယ်။ အောက်က Code မှာ ကြည့်လိုက်ရအောင် …

      
        <!DOCTYPE html>
      
        <html lang="en">
      
        <head>
      
          <meta charset="UTF-8">
      
          <title>CSS Element Type Selector</title>
      
          <style>
      
            div {
      
              padding: 20px;
      
              margin: 20px;
      
             background-color: #f5f5f5;
      
             border-radius: 2px;
      
           }
      
           h1 {
      
             color: #00bdc4;
      
             border-bottom: 1px solid #bdbdbd;
      
             padding-bottom: 20px;
      
           }
      
           p {
      
             color: #757575;
      
           }
      
         </style>
      
        </head>
      
        <body>
      
         <div>
      
           <h1>CSS Element Type Selector</h1>
      
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos quos quaerat sunt eius numquam repellendus itaque labore voluptatum impedit, ipsum cumque eum iure necessitatibus distinctio est incidunt? Nam possimus, mollitia.</p>
      
           <ul>
      
             <li>Something</li>
      
             <li>Something</li>
      
             <li>Something</li>
      
             <li>Something</li>
      
           </ul>
      
         </div>
      
        </body>
      
        </html>

view raw css_element_type_selector.html hosted with ❤ by GitHub

ဒီ Code ထဲမှာတော့ div, h1, p စတဲ့ HTML Elements တွေကို CSS Type Selector နဲ့ ခေါ်ထားပြီး Styles အချို့သတ်မှတ်လိုက်တာကြောင့် မသက်ဆိုင်တဲ့ HTML Elements တွေမှာတော့ ပြောင်းလဲသွားမှာ မဟုတ်ပါဘူး။ ဒီ Selector က နေရာတိုင်းတော့ သုံးလို့အဆင်မပြေပါဘူး။

မိမိ Project ထဲက div Elements တွေ အကုန်လုံးကို Style သတ်မှတ်ချင်တယ်ဆိုရင်တော့ သုံးလို့ရမယ်ပေါ့။ ဒါပေမယ့် တိတိကျကျ div တစ်ခုထဲကိုပဲ Select လုပ်ချင်တယ်ဆိုရင်တော့ ID Selector ဒါမှမဟုတ် Class Selector နဲ့မှ အဆင်ပြေမှာ ဖြစ်ပါတယ်။

Descendant Selector

Class Selector ပြီးရင် နောက်ထပ်အသုံးအများဆုံး Selector တစ်ခုလို့ ပြောလို့ရပါတယ်။ အောက်က Code မှာ ဆိုရင် .list1, .list2, .list3 ဆိုပြီးတော့ Unordered List လေးတွေ သုံးခုရှိမယ်ပေါ့။ ဒီ List သုံးခုထဲမှာရှိတဲ့ Elements တွေကို Descendat Selector ကို အသုံးပြုပြီး ဘယ်လို Select လုပ်ထားလဲဆိုတာ ကြည့်လိုက်ရအောင် …

      
        <!DOCTYPE html>
      
        <html lang="en">
      
        <head>
      
          <meta charset="UTF-8">
      
          <title>CSS Descendant Selector</title>
      
          <style>
      
            h1 {
      
              color: #00bdc4;
      
              border-bottom: 1px solid #bdbdbd;
      
             padding-bottom: 20px;
      
           }
      
           .list1 li {
      
             background-color: #9c27b0;
      
           }
      
           .list2 a {
      
             color: #00bdc4;
      
           }
      
           .list3 a {
      
             color: #fafafa;
      
           }
      
           .list3 p {
      
             background-color: #673ab7;
      
           }
      
         </style>
      
        </head>
      
        <body>
      
         <div>
      
           <h1>CSS Descendant Selector</h1>
      
           <ul class="list1">
      
             <li>Something</li>
      
             <li>Something</li>
      
             <li>Something</li>
      
             <li>Something</li>
      
           </ul>
      
           <ul class="list2">
      
             <li><a href="#!">Something</a></li>
      
             <li><a href="#!">Something</a></li>
      
             <li><a href="#!">Something</a></li>
      
           </ul>
      
           <ul class="list3">
      
             <li><a href="#!"><p>Something</p></a></li>
      
             <li><a href="#!"><p>Something</p></a></li>
      
             <li><a href="#!"><p>Something</p></a></li>
      
           </ul>
      
         </div>
      
        </body>
      
        </html>

view raw css_descendant_selector.html hosted with ❤ by GitHub

ဒီနေရာမှာ တစ်ခုသတိထားရမှာက Code ကို ပိုမရေးမိစေဖို့ပါပဲ။ Descendant Selector လို့ ဆိုတာနဲ့ပဲ “ul li a {}” စသည်ဖြင့် တန်းစီပြီး Elements တွေ အစဉ်လိုက် စီသွားစရာ မလိုပါဘူး။ ကိုယ် Target ထားတဲ့ Element ကို Parent Element ရဲ့နောက်ကနေ ခေါ်ပေးလိုက်ရုံပါပဲ။

အခု ကျနော်တို့ Code ထဲမှာလည်း .list2 နဲ့ .list3 မှာရှိတဲ့ a နဲ့ p Elements တွေကို .list2 a, .list3 a, .list3 p ဆိုပြီး Parent Elements တွေရဲ့ နောက်ကနေ တိုက်ရိုက်ခေါ်ယူထားတာကို တွေ့ရမှာပါ။

Pseudo Class Selector

Pseudo Class Selector ကို သုံးမယ်ဆိုရင် CSS မှာ ပါဝင်တဲ့ Pseudo Classes တွေကိုလည်း သိမှရပါမယ်။ အကုန်လုံး သိစရာတော့ မလိုပေမယ့် တစ်ချို့အသုံးဝင်မယ့် Pseudo Classes လေးတွေကိုတော့ မှတ်ထားဖို့ လိုပါလိမ့်မယ်။

နောက်ပြီး တစ်ခုသတိထားရမှာက CSS မှာ Pseudo Classes တွေရော၊ Pseudo Elements တွေရော ရှိတာဆိုတော့ လေ့လာတဲ့အခါမှာ မရောသွားစေဖို့တော့ လိုအပ်ပါတယ်။ ဒီတော့ Pseudo Classes တွေကို Pseudo Class Selector နဲ့တွဲပြီး ဘယ်လိုအသုံးပြုမလဲ ကြည့်လိုက်ရအောင် …

:active, :hover, :link, :visited

ဒီ Pseudo Classes တွေကတော့ Link တွေကို Style သတ်မှတ်ချင်တဲ့ အခါမှာ သုံးပါတယ်။ သုံးလည်း သုံးဖူးကြမှာပါ။ Link တွေအတွက်ပဲ သုံးတယ်ဆိုပေမယ့် :active နဲ့ :hover ကတော့ a Element နဲ့မှ မဟုတ်ပါဘူး အခြား HTML Elements တွေနဲ့လည်း တွဲဖက်အသုံးပြုနိုင်ပါသေးတယ်။ Code လေး နည်းနည်းပါးပါး ရေးလိုက်ရအောင်ဗျာ …

      
        <!DOCTYPE html>
      
        <html lang="en">
      
        <head>
      
          <meta charset="UTF-8">
      
          <title>CSS Psuedo Class Selector (:active, :hover, :link, :visited)</title>
      
          <style>
      
            h1 {
      
              color: #00bdc4;
      
              border-bottom: 1px solid #bdbdbd;
      
             padding-bottom: 20px;
      
           } 
      
           a {
      
             padding: 20px;
      
             text-decoration: none;
      
             border-radius: 2px;
      
             color: #fafafa;
      
           }
      
           a:link {
      
             background-color: #f44336;
      
           }
      
           a:visited {
      
             background-color: #ffeb3b;
      
           }
      
           a:hover {
      
             background-color: #4caf50;
      
           }
      
           a:active {
      
             background-color: #9c27b0;
      
           }
      
         </style>
      
        </head>
      
        <body>
      
         <div>
      
           <h1>CSS Psuedo Class Selector (:active, :hover, :link, :visited)</h1>
      
           <a href="https://techx.myanmarlinks.net/programming" target="_blank">TechX Programming</a></li>
      
         </div>
      
        </body>
      
        </html>

view raw css_psuedo_class_selector (active, hover, link, visited).html hosted with ❤ by GitHub

ဒီနေရာမှာ တစ်ခုလွဲကြတာက :active နဲ့ :hover နဲ့ကို အတူတူလို့ ထင်ကြတာပါ။ အမှန်က မတူပါဘူး။ User က Link ကို Clik ခေါက်လိုက်တဲ့ State ကို :active နဲ့ သတ်မှတ်ရမှာဖြစ်ပြီး User က Cusor ကို Link ပေါ်မှာ တင်ထားတဲ့ State ကိုတော့ :hover နဲ့ သတ်မှတ်ပေးမှာပါ။

နောက်ပြီး :link ကိုတော့ Click မခေါက်ရသေးတဲ့ Link ဒါမှမဟုတ်ရင်လည်း မသွားရသေးတဲ့ Link တစ်ခုရဲ့ Style ကို သတ်မှတ်ချင်တဲ့အခါမှာ အသုံးပြုပြီး :visited ကိုတော့ Click ခေါက်ပြီးသွားတဲ့ Link ဒါမှမဟုတ်ရင်လည်း သွားပြီးတဲ့ Link တစ်ခုရဲ့ Style ကို သတ်မှတ်ချင်တဲ့အခါမှာ အသုံးပြုပါတယ်။

ပြီးရင် ကျနော်တို့ :active နဲ့ :hover ကို a Element နဲ့ မဟုတ်ပဲ တခြား HTML Elements တွေ နဲ့သုံးကြည့်ရအောင် …

      
        <!DOCTYPE html>
      
        <html lang="en">
      
        <head>
      
         <meta charset="UTF-8">
      
         <title>CSS Psuedo Class Selector (:active and :hover)</title>
      
         <style>
      
           h1 {
      
             color: #00bdc4;
      
             border-bottom: 1px solid #bdbdbd;
      
              padding-bottom: 20px;
      
            }
      
            p {
      
              display: none;
      
              padding: 20px;
      
              background-color: #f5f5f5;
      
              color: #757575;
      
            }
      
            div {
      
              cursor: pointer;
      
            } 
      
            div:hover p {
      
              display: block;
      
            }
      
          </style>
      
        </head>
      
        <body>
      
          <div>
      
            <h1>CSS Psuedo Class Selector (:active and :hover)</h1>
      
            <div> Hover Me!!!
      
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias quaerat, ad laborum atque quasi adipisci, ducimus quo hic ratione autem odit totam ipsum odio, praesentium cum voluptate repudiandae quia nihil.</p>
      
            </div>
      
          </div>
      
        </body>
      
        </html>

view raw css_pseudo_class_selector (active and hover).html hosted with ❤ by GitHub

ဒီ Code ကို Run လိုက်မယ်ဆိုရင် ကျနော်တို့ရဲ့ p Element လေးကတော့ display:none နဲ့ ဖျောက်ထားတာကြောင့် ပျောက်နေပါလိမ့်မယ်။ ဒါပေမယ့် “Hover Me!!!” ဆိုတဲ့ စာလုံးလေးတွေပေါ်ကို Mouse Hover လုပ်လိုက်မယ်ဆိုရင် ကျနော်တို့ရဲ့ p Element လေး ပြန်ပေါ်လာပါလိမ့်မယ်။

ဒီနေရာမှာ CSS Selectors တွေကို သုံးတတ်ဖို့အရေးကြီးတယ်ဆိုတာ ပိုသိသာလာပါတယ်။ နောက်ပြီး CSS Selectors တွေရဲ့ Power ပေါ့။ ဘာလို့လဲဆိုတော့ အခုကျနော်တို့ ရေးလိုက်တာကို JS နဲ့ ရေးလို့လည်း ရပါတယ်။ ဒါပေမယ့် CSS Master တွေကတော့ JS သုံးပြီး Website အလေးမခံတော့ပဲ CSS နဲ့ပဲ ကစ်လိုက်ကြတာ များပါတယ်။

ပျောက်နေတဲ့ p Element ကို “div:hover p {}” ဆိုပြီး div ကို hover လုပ်တဲ့ အချိန်မှာ p Element ကို “display: block;” သတ်မှတ်ပြီး ပြန်ပေါ်အောင် လုပ်လိုက်တာပဲ ဖြစ်ပါတယ်။ ဒီနေရာမှာ ရိုးရိုးတမ်းတမ်း “div p {}” ဆိုပြီး ခေါ်မယ်ဆိုရင်တော့ အလုပ်လုပ်မှာ မဟုတ်ပါဘူး။ ဒီ Code မှာ မင်းသားက :hover ပဲ ဖြစ်ပါတယ်။

ဒါပေမယ့် ဒီ Pseudo Class လေးမျိုးလုံးကို တစ်ပြိုင်နက်တည်း သုံးမယ်ဆိုရင်တော့ သတိပြုစရာ ရှိပါတယ်။ :link, :visited, :hover, :active ဆိုပြီး အစီအစဉ်လိုက် Styles တွေ သတ်မှတ်ပေးရမှာပါ။ အစီအစဉ်မကျရင်တော့ လုံးဝ အလုပ်လုပ်မှာ မဟုတ်ပါဘူး။

နိဂုံး

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

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 Selectors</title>
	<style>
	* {
	padding: 20px;
	border: 1px solid #212121;
	}
	</style>
	</head>
	<body>
	<h1>CSS Universal Selector</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos quos quaerat sunt eius numquam repellendus itaque labore voluptatum impedit, ipsum cumque eum iure necessitatibus distinctio est incidunt? Nam possimus, mollitia.</p>
	<ul>
	<li>Something</li>
	<li>Something</li>
	<li>Something</li>
	<li>Something</li>
	</ul>
	</body>
	</html>