Псевдокласс nth-child

Псевдокласс nth-child родиникнинг n-чи боласи бўлган элементни танлайди.

Синтаксис

селектор: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-чи боласи бўлган 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;
}