Pseudo-classes

User Action Pseudo-classes

User က တစ်ခုခု လုပ်လိုက်တဲ့အချိန်မှာ ပြောင်းလဲတာတွေပါ။

:hover - Mouse တင်လိုက်တဲ့အချိန်။
:active - Mouse နှိပ်ထားတဲ့အချိန် (Click နှိပ်ပြီး မလွှတ်ခင်)။
:focus - Input box ထဲကို စာရိုက်ဖို့ နှိပ်လိုက်တဲ့အချိန် (Keyboard focus ရချိန်)။
:focus-within - ကိုယ်တိုင် (သို့) ကိုယ့်ရဲ့ Child တစ်ခုခု Focus ရနေတဲ့အချိန်။
:focus-visible - Keyboard မှာ Tab နှိပ်ပြီး သွားတဲ့အချိန်မှာပဲ Focus ပြချင်တဲ့အခါ (Mouse နဲ့ နှိပ်ရင် မပြဘူး)။

:focus - Focus ရတာနဲ့ အလုပ်လုပ်ပါတယ်။ (Mouse နဲ့ နှိပ်နှိပ်၊ Keyboard နဲ့ သွားသွား)
:focus-within - Parent Element တစ်ခုက သူ့အထဲက Child တစ်ခုခု Focus ရသွားရင် Parent ပါ Style ပြောင်းချင်တဲ့အခါ သုံးပါတယ်။ (ဥပမာ - Form တစ်ခုလုံးကို Highlight လုပ်တာမျိုး)
:focus-visible - User က Keyboard သုံးနေမှ (Tab နှိပ်မှ) Focus Ring ပြပြီး၊ Mouse နဲ့ နှိပ်ရင် မပြချင်တဲ့အခါ သုံးပါတယ်။ (UX ပိုကောင်းပါတယ်)

button:hover {
  background-color: green;
}

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

Structural Pseudo-classes

Element တွေရဲ့ အစီအစဉ်ပေါ် မူတည်ပြီး ရွေးတာပါ။

:first-child - ပထမဆုံး child။
:last-child - နောက်ဆုံး child။
:nth-child(n) - n ခုမြောက် child (ဥပမာ - ဇယားကွက်တွေမှာ တစ်ကြောင်းခြား အရောင်ပြောင်းချင်ရင်)။

/* စာရင်းထဲက ပထမဆုံး item */
li:first-child {
  font-weight: bold;
  color : red;
}

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

Link Pseudo-classes

Link (<a>) တွေအတွက် သီးသန့်ပါ။

:visited - ဝင်ကြည့်ပြီးသား Link။
:link - မဝင်ကြည့်ရသေးတဲ့ Link။

a:visited {
  color: purple;
}