nth-child կեղծ դաս

nth-child կեղծ դասն ընտրում է տարրը, որը ծնողի n-րդ սերունդն է:

Շարահյուսություն

ընտրիչ:nth-child(թիվ | odd | even | արտահայտություն) {
	
}

Արժեքներ

Արժեք	Նկարագրություն
թիվ	Դրական թիվ սկսած `1`-ից: Նշանակում է տարրի համարը, որին մենք ցանկանում ենք դիմել: Տարրերի համարակալումը սկսվում է `1`-ից:
`odd`	Կենտ տարրեր:
`even`	Զույգ տարրեր:
արտահայտություն	Կարելի է կազմել հատուկ արտահայտություններ n տառով, որը նշանակում է բոլոր ամբողջ թվերը զրոյից (ոչ մեկից) մինչև անսահմանություն: Այսպիսով, `2n` - նշանակում է բոլոր զույգ թվերը (սկսած երկրորդից): Ինչպե՞ս հասկանալ սա: Փոխարինում ենք `n`-ում հաջորդաբար թվեր՝ սկսած `0`-ից և այսպես շարունակ: եթե n = 0, ապա 2n-ը կտա 0 - նման տարր գոյություն չունի (տարրերի համարակալումը սկսվում է 1-ից), եթե n = 1, ապա 2n-ը կտա 2 - երկրորդ տարրը, եթե n = 2, 2n-ը տալիս է 4 - չորրորդ տարրը: Եթե գրենք 3n - սա կլինի յուրաքանչյուր երրորդ տարրը (սկսած երրորդից), և այսպես շարունակ:

Օրինակ

Այս օրինակում մենք կարմիր գույն կդարձնենք այն li տարրը, որը իր ծնողի 4-րդ սերունդն է:

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