nth-last-of-type ဆိုတဲ့ pseudo-class

nth-last-of-type ဆိုတဲ့ pseudo-class ဟာ မိဘရဲ့ သတ်မှတ်ထားတဲ့ အမျိုးအစားထဲမှာ အောက်ခြေကနေ ရေတွက်လိုက်တဲ့အခါ n-ထိုးမြောက် ဖြစ်နေတဲ့ element တစ်ခုကို ရွေးချယ်ပါတယ်။ ဒါဟာ nth-of-type နဲ့ ဆင်တူပါတယ်၊ ဒါပေမယ့် ရေတွက်မှုကို အောက်ခြေကနေ စပါတယ်။

ဖွဲ့စည်းပုံ

selector: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 ကို ရှာကြည့်ရအောင်။

<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>

h2:nth-last-of-type(2) {
	color: red;
}

ဥပမာ

အောက်ခြေကနေ ရေတွက်လိုက်တဲ့အခါ ကိန်းစုံဖြစ်တဲ့ h2 အားလုံးကို ရှာကြည့်ရအောင်။

<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>

h2:nth-last-of-type(even) {
	color: red;
}

ဥပမာ

အောက်ခြေကနေ ရေတွက်လိုက်တဲ့အခါ ကိန်းမ ဖြစ်တဲ့ h2 အားလုံးကို ရှာကြည့်ရအောင်။

<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>

h2:nth-last-of-type(odd) {
	color: red;
}