Pseudo-classes

Pseudo-class ဆိုတာ element တစ်ခုရဲ့ state ကိုရွေးတာပါ။ Mouse တင်ထားတဲ့ :hover, input focus ဖြစ်တဲ့ :focus, list item အစီအစဉ်ရွေးတဲ့ :nth-child() စတာတွေဖြစ်ပါတယ်။ Interactive UI တွေမှာ hover/focus state မရှိရင် user က ဘာနှိပ်လို့ရလဲ ခန့်မှန်းရခက်တတ်ပါတယ်။

.button:hover {
  transform: translateY(-2px);
}

.input:focus {
  outline: 2px solid dodgerblue;
}

tr:nth-child(even) {
  background-color: #f6f8fa;
}

Button ကို hover လုပ်ရင် နည်းနည်းမြောက်သွားမယ်။ Input focus ဖြစ်ရင် outline ပေါ်မယ်။ Table row တွေကို alternating background ပေးနိုင်မယ်။