Skip to content
Takkatho University Takkatho University တက္ကသိုလ် (Takkatho) - Myanmar Programming Learning Platform
GitHub

Pseudo-classes

User Action Pseudo-classes

Section titled “User Action Pseudo-classes”

User ဘက်ကနေ Action တစ်ခုခု လုပ်လိုက်တဲ့ အချိန်မျိုးမှာ Style ပြောင်းလဲသွားစေချင်ရင် သုံးပါတယ်။

  • :hover - Element ပေါ်ကို Mouse သွားတင်လိုက်တဲ့ အချိန်။
  • :active - Mouse ကို ဖိနှိပ်ထားတဲ့ အချိန် (Click နှိပ်လိုက်ပြီး လက်မလွှတ်ခင် အချိန်လေး)။
  • :focus - Input Box ထဲကို စာရိုက်ဖို့အတွက် နှိပ်လိုက်တဲ့ အချိန် (Keyboard Focus ရသွားတဲ့ အချိန်)။
  • :focus-within - Element ကိုယ်တိုင် ဖြစ်စေ၊ ဒါမှမဟုတ် သူ့ရဲ့ Child Element တစ်ခုခုက ဖြစ်စေ Focus ရနေတဲ့ အချိန်။
  • :focus-visible - User က Keyboard ကနေ Tab ခလုတ်နှိပ်ပြီး သွားတဲ့ အချိန်မျိုးမှာပဲ Focus Ring ပြချင်တဲ့အခါ။ (Mouse နဲ့ နှိပ်ရင်တော့ မပြပါဘူး)
button:hover {
  background-color: green;
}


input:focus {
  border-color: blue;
  outline: none;
}
pseudo classes

Structural Pseudo-classes

Section titled “Structural Pseudo-classes”

Element တွေရဲ့ ဖွဲ့စည်းတည်ဆောက်ပုံ အစီအစဉ် (Structure) အပေါ် မူတည်ပြီး ရွေးချယ်ချင်တဲ့အခါ သုံးပါတယ်။

  • :first-child - အုပ်စုတစ်ခုထဲက ပထမဆုံး Child Element ကို ရွေးချယ်တာပါ။
  • :last-child - အုပ်စုတစ်ခုထဲက နောက်ဆုံး Child Element ကို ရွေးချယ်တာပါ။
  • :nth-child(n) - မိမိလိုချင်တဲ့ (n) ခုမြောက် Child Element ကို ရွေးချယ်တာပါ။ (ဥပမာ - Table ဇယားကွက်တွေမှာ တစ်ကြောင်းခြားစီ အရောင်လေးတွေ ပြောင်းချင်တဲ့အခါမျိုးမှာ အသုံးများပါတယ်)
/* စာရင်းထဲက ပထမဆုံး item */
li:first-child {
  font-weight: bold;
  color : red;
}


/* မ (1, 3, 5...) တွေကို အရောင်ပြောင်း */
tr:nth-child(odd) {
  background-color: purple;
}
pseudo classes
Section titled “Link Pseudo-classes”

ဒါတွေကတော့ Link (<a> tag) တွေအတွက် သီးသန့် အသုံးပြုတဲ့ Pseudo-classes တွေပါ။

  • :visited - User အနေနဲ့ အရင်က ဝင်ရောက်ကြည့်ရှုပြီးသား ဖြစ်နေတဲ့ Link တွေကို ပြောင်းချင်တဲ့အခါ။
  • :link - တစ်ခါမှ မဝင်ကြည့်ရသေးတဲ့ Link အသစ်တွေကို ပြောင်းချင်တဲ့အခါ။
a:visited {
  color: purple;
}