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