အတုအယောင်အတန်းအစား nth-of-type

အတုအယောင်အတန်းအစား nth-of-type သည် သတ်မှတ်ထားသောအမျိုးအစား၏ n-th မျိုးဆက်ဖြစ်သည့် အစိတ်အပိုင်းကို ရွေးချယ်သည်။

ဆိုလိုသည်မှာ၊ ကျွန်ုပ် h2:nth-of-type(4) ဟု ရေးပါက - မိဘထဲတွင် 4-th h2 ကို တွေ့ရှိမည် (nth-child နှင့် မတူဘဲ၊ ထိုအတုအယောင်အတန်းအစားသည် မိဘထဲတွင် 4-th အစိတ်အပိုင်းဖြစ်သည့် h2 ကိုသာ တွေ့ရှိမည်)။

ဝါကျဖွဲ့စည်းပုံ

ရွေးချယ်သူ:nth-of-type(ဂဏန်း | odd | even | ဖော်ပြချက်){

}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
ဂဏန်း	`1` မှ စတင်သော အပြုသဘောဆောင်သည့်ဂဏန်း။ ကျွန်ုပ်တို့ ဆက်သွယ်လိုသည့် အစိတ်အပိုင်း၏ အမှတ်စဉ်ကို သတ်မှတ်ပေးသည်။ အစိတ်အပိုင်းများ၏ အမှတ်စဉ်သည် `1` မှ စတင်သည်။
`odd`	မကိန်းဂဏန်း အစိတ်အပိုင်းများ။
`even`	စုံဂဏန်း အစိတ်အပိုင်းများ။
ဖော်ပြချက်	အင်္ဂလိပ်အက္ခရာ n ဖြင့် အထူးဖော်ပြချက်များ ဖွဲ့စည်းနိုင်သည်၊ ထို n သည် သုည (တစ်မှ မဟုတ်) မှ အဆုံးမရှိသော ကိန်းပြည့်အားလုံးကို ကိုယ်စားပြုသည်။ ထို့ကြောင့်၊ `2n` - ဆိုလိုသည်မှာ စုံကိန်းအားလုံး (ဒုတိယမှ စတင်၍)။ ဤအရာကို မည်သို့နားလည်နိုင်မည်နည်း။ `n` ထဲသို့ `0` မှ စတင်၍ ဂဏန်းများကို အစဉ်လိုက် အစားထိုးကြည့်ပါ။ n = 0 ဖြစ်ပါက၊ 2n သည် 0 ကို ပေးမည် - �ိုကဲ့သို့သော အစိတ်အပိုင်းမရှိ (အစိတ်အပိုင်းများ အမှတ်စဉ်သည် 1 မှစသည်)၊ အကယ်၍ n = 1 ဖြစ်ပါက၊ 2n သည် 2 ကို ပေးမည် - ဒုတိယအစိတ်အပိုင်း၊ အကယ်၍ n = 2 ဖြစ်ပါက၊ 2n သည် 4 ကို ပေးမည် - စတုတ္ထအစိတ်အပိုင်း။ 3n ဟု ရေးပါက - ဤသည်မှာ တတိယမြောက် အစိတ်အပိုင်းတိုင်း (တတိယမှ စတင်၍)၊ စသဖြင့် ဖြစ်လိမ့်မည်။

နမူနာ

မိဘထဲတွင် 2-th h2 ဖြစ်သည့် h2 ကို ရှာကြည့်ကြပါစို့။

<div>
	<h2>ခေါင်းစဉ်</h2>
	<p>စာပိုဒ်</p>
	
	<h2>ခေါင်းစဉ်</h2>
	<p>စာပိုဒ်</p>
	
	<h2>ခေါင်းစဉ်</h2>
	<p>စာပိုဒ်</p>
</div>

h2:nth-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>
</div>

h2:nth-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>
</div>

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