Kichaguzi cha rangi cha nth-child

Kichaguzi cha rangi nth-child huchagua kipengele, ambacho ni mtoto wa n-th wa mzazi.

Syntax

kichaguzi:nth-child(nambari | odd | even | usemi) {
	
}

Thamani

Thamani	Maelezo
nambari	Nambari chanya kuanzia `1`. Inabainisha nambari ya kipengele ambacho tunataka kukirejelea. Nambari ya vipengele huanzia `1`.
`odd`	Vipengele visivyo vya kawaida.
`even`	Vipengele vya kawaida.
usemi	Unaweza kutengeneza misemo maalum kwa herufi n, ambayo inaashiria nambari zote kamili kutoka sifuri (si moja) hadi ukosefu wa mwisho. Kwa hivyo, `2n` - inamaanisha nambari zote za kawaida (zikianzia kwa ya pili). Je, hii inaelewaje? Badilisha `n` mfululizo nambari kutoka `0` na kadhalika: ikiwa n = 0, basi 2n itatoa 0 - kipengele kama hicho hakipo (nambari ya vipengele kuanzia 1), ikiwa n = 1, basi 2n itatoa 2 - kipengele cha pili, ikiwa n = 2, 2n inatoa 4 - kipengele cha nne. Ikiwa utaandika 3n - hii itakuwa kila kipengele cha tatu (kikianzia kwa cha tatu), na kadhalika.

Mfano

Katika mfano huu, tutafanya rangi nyekundu li ile ambayo ni 4-th mtoto wa mzazi wake:

<ul>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
</ul>

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

Mfano

Sasa tutafanya nyekundu li zote za kawaida:

<ul>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
</ul>

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

Mfano

Sasa tutafanya nyekundu li zote zisizo za kawaida:

<ul>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
</ul>

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

Mfano

Sasa tutafanya nyekundu kila li ya tatu (kukaanzia ya tatu):

<ul>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
</ul>

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

Mfano

Katika kichaguzi unaweza kubainisha anuwai ya vipengele. Wacha tuseme, una orodha ya 20 vipengele na unahitaji kuchagua vipengele kutoka 7 hadi 14 ikiwa ni pamoja na. Hii inaweza kufanyika hivi:

<ol>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
	<li>kipengele cha orodha</li>
</ol>

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