nth-child ပရူဒိုကလပ်စ်

ပရူဒိုကလပ်စ် nth-child သည် ၎င်း၏မိဘ၏ n-th မျိုးဆက်ဖြစ်သော အစိတ်အပိုင်းတစ်ခုကို ရွေးချယ်သည်။

ဝါကျဖွဲ့ပုံ

ရွေးချယ်သူ:nth-child(ဂဏန်း | 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 ဟုရေးလျှင် ထိုအရာသည် တတိယမြောက်တိုင်း (တတိယမှစတင်၍) ဖြစ်ပြီး အခြားအရာများလည်း ထိုနည်းတူပင်ဖြစ်သည်။

ဥပမာ

ဤဥပမာတွင် မိဘ၏ 4-th မျိုးဆက်ဖြစ်သော li ကို အနီရောင်အဖြစ် ပြောင်းလဲပါမည်။

<ul>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
</ul>

li:nth-child(4) {
	color: red;
}

ဥပမာ

ယခုအခါ စုံကိန်း li အားလုံးကို အနီရောင်အဖြစ် ပြောင်းလဲပါမည်။

<ul>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
</ul>

li:nth-child(even) {
	color: red;
}

ဥပမာ

ယခုအခါ မကိန်း li အားလုံးကို အနီရောင်အဖြစ် ပြောင်းလဲပါမည်။

<ul>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
</ul>

li:nth-child(odd) {
	color: red;
}

ဥပမာ

ယခုအခါ တတိယမြောက်တိုင်း (တတိယမှစတင်၍) li ကို အနီရောင်အဖြစ် ပြောင်းလဲပါမည်။

<ul>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
</ul>

li:nth-child(3n) {
	color: red;
}

ဥပမာ

ရွေးချယ်သူတွင် အစိတ်အပိုင်းများ၏ အတိုင်းအတာကို သတ်မှတ်နိုင်သည်။ ဥပမာအားဖြင့်၊ သင့်တွင် 20 ခုရှိသော စာရင်းတစ်ခုရှိပြီး 7 မှ 14 အထိ အစိတ်အပိုင်းများကို ရွေးချယ်ရန်လိုအပ်သည်။ ဤသို့ပြုလုပ်နိုင်ပါသည်။

<ol>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
	<li>စာရင်းအချက်</li>
</ol>

li:nth-child(n+7):nth-child(-n+14) {
	color: red;
}