CSS Pseudo-classes

❮ ယခင် နောက်တစ်ခု ❯

Pseudo-classes ဆိုတာ ဘာလဲ။

ဒြပ်စင်တစ်ခု၏ အထူးအခြေအနေတစ်ခုကို သတ်မှတ်ရန် pseudo-class ကိုအသုံးပြုသည်။

ဥပမာအားဖြင့်၊ ၎င်းကိုအသုံးပြုနိုင်သည်-

အသုံးပြုသူတစ်ဦးက ၎င်းကို မောက်စ်တင်သည့်အခါ အစိတ်အပိုင်းတစ်ခု ပုံစံဖန်တီးပါ။
လည်ပတ်ခဲ့သည့်ပုံစံနှင့် မလည်ပတ်ရသေးသောလင့်ခ်များ မတူညီပါ။
အာရုံစူးစိုက်မှုရလာသောအခါတွင် အစိတ်အပိုင်းတစ်ခုကို ပုံစံသွင်းပါ။

Mouse Over Me

အထားအသို

pseudo-classes ၏ syntax

selector:pseudo-class {
property: value;
}

Anchor Pseudo-classes

လင့်ခ်များကို ပုံစံအမျိုးမျိုးဖြင့် ပြသနိုင်သည်-

ဥပမာ

/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

မှတ်ချက်- ထိရောက်စေရန်အတွက် CSS ၏ အဓိပ္ပါယ်ဖွင့်ဆိုချက်တွင် ပါ a:hoverရှိရမည် a:link။ ထိရောက်မှုရှိစေရန်အတွက် CSS ၏ အဓိပ္ပါယ်ဖွင့်ဆိုချက်တွင် ပါဝင်ရမည် ။ Pseudo-class အမည်များသည် စာလုံးအကြီးအသေး အာရုံမခံပါ။a:visiteda:activea:hover

Pseudo-classes နှင့် HTML Classes များ

Pseudo-class များကို HTML အတန်းများနှင့် ပေါင်းစပ်နိုင်သည်။

ဥပမာရှိ လင့်ခ်ကို နှိပ်လိုက်သောအခါ၊ ၎င်းသည် အရောင်ပြောင်းသွားလိမ့်မည်-

ဥပမာ

a.highlight:hover {
color: #ff0000;
}

<div> ပေါ်တွင် ရွှေ့ပါ။

:hover<div> ဒြပ်စင်တစ်ခုပေါ်တွင် pseudo-class ကိုအသုံးပြုခြင်း၏ဥပမာ တစ်ခု။

ဥပမာ

div:hover {
background-color: blue;
}

ရိုးရှင်းသော Tooltip ကို Hover

<p> ဒြပ်စင်ကိုပြသရန် (ကိရိယာအကြံပြုချက်ကဲ့သို့)

ဥပမာ

p {
display: none;
background-color: yellow;
padding: 20px;
}

div:hover p {
display: block;
}

CSS - :first-child Pseudo-class

pseudo-class သည် :first-childအခြားဒြပ်စင်တစ်ခု၏ ပထမကလေးဖြစ်သည့် သတ်မှတ်ထားသော ဒြပ်စင်နှင့် ကိုက်ညီပါသည်။

ပထမ <p> ဒြပ်စင်နှင့် ကိုက်ညီပါ။

အောက်ဖော်ပြပါ ဥပမာတွင်၊ ရွေးချယ်သူသည် မည်သည့်ဒြပ်စင်၏ ပထမကလေးဖြစ်သည့် <p> ဒြပ်စင်နှင့် ကိုက်ညီသည်-

ဥပမာ

p:first-child {
color: blue;
}

<p> ဒြပ်စင်အားလုံးရှိ ပထမ <i> ဒြပ်စင်ကို ယှဉ်ပါ။

အောက်ပါဥပမာတွင်၊ ရွေးချယ်သူသည် <p> ဒြပ်စင်များအားလုံးရှိ ပထမ <i> ဒြပ်စင်နှင့် ကိုက်ညီသည်-

ဥပမာ

p i:first-child {
color: blue;
}

ပထမကလေး <p> ဒြပ်စင်များအားလုံးရှိ <i> ဒြပ်စင်အားလုံးကို ယှဉ်ပါ။

အောက်ဖော်ပြပါ ဥပမာတွင်၊ ရွေးချယ်သူသည် အခြားဒြပ်စင်တစ်ခု၏ ပထမကလေးဖြစ်သော <p> ဒြပ်စင်များရှိ <i> ဒြပ်စင်များအားလုံးနှင့် ကိုက်ညီသည်-

ဥပမာ

p:first-child i {
color: blue;
}

CSS - :lang Pseudo-class

:langpseudo-class သည် သင့်အား မတူညီသောဘာသာစကားများအတွက် အထူးစည်းမျဉ်းများကို သတ်မှတ်ခွင့်ပြုသည် ။

အောက်ပါဥပမာတွင်၊ :langlang="no" ဖြင့် <q> ဒြပ်စင်များအတွက် ကိုးကားအမှတ်အသားများကို သတ်မှတ်သည်-

ဥပမာ

<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

နောက်ထပ် ဥပမာများ

ဤဥပမာသည် ဟိုက်ပါလင့်ခ်များသို့ အခြားစတိုင်များကို ထည့်သွင်းနည်းကို သရုပ်ပြသည်။

ဤဥပမာသည် :focus pseudo-class ကိုအသုံးပြုပုံကို သရုပ်ပြသည်။