nth-last-of-type ဆိုတဲ့ pseudo-class
nth-last-of-type ဆိုတဲ့ pseudo-class ဟာ
မိဘရဲ့ သတ်မှတ်ထားတဲ့ အမျိုးအစားထဲမှာ အောက်ခြေကနေ ရေတွက်လိုက်တဲ့အခါ
n-ထိုးမြောက် ဖြစ်နေတဲ့ element တစ်ခုကို ရွေးချယ်ပါတယ်။
ဒါဟာ nth-of-type
နဲ့ ဆင်တူပါတယ်၊ ဒါပေမယ့် ရေတွက်မှုကို အောက်ခြေကနေ စပါတယ်။
ဖွဲ့စည်းပုံ
cssselector:nth-last-of-type(number | odd | even | expression) {
}
တန်ဖိုးများ
| တန်ဖိုး | ရှင်းလင်းချက် |
|---|---|
| ဂဏန်း |
1 ကနေ စတင်တဲ့ အပေါင်းဂဏန်း။
ကျွန်ုပ်တို့ ရည်ညွှန်းချင်တဲ့ element ရဲ့ နံပါတ်ကို သတ်မှတ်ပေးပါတယ်။
Element များရဲ့ နံပါတ်သတ်မှတ်ခြင်းကို 1 ကနေ စပါတယ်။
|
odd |
အမှတ်စဉ်မ ကိန်းများ (အကြိမ်များ)။ |
even |
အမှတ်စဉ်စုံ ကိန်းများ (အကြိမ်များ)။ |
| ဖော်ပြချက် |
n ဆိုတဲ့ စာလုံးကို အသုံးပြုပြီး အထူးဖော်ပြချက်တွေ ဖွဲ့စည်းနိုင်ပါတယ်၊
အဲဒီ n ဟာ သုညကနေ (တစ်ကနေ မဟုတ်ပါ) အနန္တထိ ကိန်းပြည့်အားလုံးကို ကိုယ်စားပြုပါတယ်။
ဒီတော့ 2n ဆိုတာ ကိန်းစုံအားလုံးကို ဆိုလိုတာပါ (ဒုတိယကနေ စပြီး)။
ဒါကို ဘယ်လိုနားလည်မလဲ? n ထဲကို ဂဏန်းတွေကို 0 ကနေ အစဉ်အတိုင်း အစားထိုးကြည့်ပါ။
n = 0 ဆိုရင် 2n က 0 ကိုပေးမယ် - ဒီလို element မရှိပါ (element များကို 1 ကနေ စသတ်မှတ်ပါတယ်)၊
n = 1 ဆိုရင် 2n က 2 ကိုပေးမယ် - ဒုတိယ element၊ n = 2 ဆိုရင်၊
2n က 4 ကိုပေးမယ် - စတုတ္ထ element။ 3n လို့ရေးရင် - ဒါက
တတိယ element တိုင်းဖြစ်ပါမယ် (တတိယကနေ စပြီး)၊ စသဖြင့်ပေါ့။
|
ဥပမာ
မိဘထဲမှာ အောက်ခြေကနေ ရေတွက်လိုက်တဲ့အခါ 2-ထိုးမြောက် h2
ဖြစ်နေတဲ့ h2 ကို ရှာကြည့်ရအောင်။
html<div>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
</div>cssh2:nth-last-of-type(2) {
color: red;
}
Результат:
ဥပမာ
အောက်ခြေကနေ ရေတွက်လိုက်တဲ့အခါ ကိန်းစုံဖြစ်တဲ့ h2 အားလုံးကို ရှာကြည့်ရအောင်။
html<div>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
</div>cssh2:nth-last-of-type(even) {
color: red;
}
Результат:
ဥပမာ
အောက်ခြေကနေ ရေတွက်လိုက်တဲ့အခါ ကိန်းမ ဖြစ်တဲ့ h2 အားလုံးကို ရှာကြည့်ရအောင်။
html<div>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
</div>cssh2:nth-last-of-type(odd) {
color: red;
}
Результат: