Псеўдаклас nth-of-type

Псеўдаклас nth-of-type выбірае элемент, які з'яўляецца n-ным нашчадкам зададзенага тыпу.

Гэта значыць, калі я напішу h2:nth-of-type(4) - знойдзецца 4-ты h2 у бацьку (у адрозненне ад nth-child, які знойдзе толькі той h2, які з'яўляецца 4-тым элементам у бацьку).

Сінтаксіс

селектар:nth-of-type(лік | odd | even | выраз){

}

Значэнні

Значэнне	Апісанне
лік	Дадатны лік пачынаючы з `1`. Задае нумар элемента, да якога мы хочам звярнуцца. Нумарацыя элементаў пачынаецца з `1`.
`odd`	Няцотныя элементы.
`even`	Цотныя элементы.
выраз	Можна складаць спецыяльныя выразы з літарай n, якая абазначае ўсе цэлыя лікі ад нуля (не ад адзінкі) да бясконцасці. Так, `2n` - значыць усе цотныя лікі (пачынаючы з другога). Як гэта зразумець? Падстаўляем у `n` паслядоўна лікі ад `0` і так далей: калі n = 0, то 2n дасць 0 - такого элемента няма (нумарацыя элементаў з 1), калі n = 1, то 2n дасць 2 - другі элемент, калі n = 2, 2n дае 4 - чацвёрты элемент. Калі напісаць 3n - гэта будзе кожны трэці элемент (пачынаючы з трэцяга), і так далей.

Прыклад

Знойдзем h2, які з'яўляецца 2-ім h2 у бацьку:

<div>
	<h2>загаловак</h2>
	<p>абзац</p>
	
	<h2>загаловак</h2>
	<p>абзац</p>
	
	<h2>загаловак</h2>
	<p>абзац</p>
</div>

h2:nth-of-type(2) {
	color: red;
}

Прыклад

Знойдзем усе цотныя h2:

<div>
	<h2>загаловак</h2>
	<p>абзац</p>
	
	<h2>загаловак</h2>
	<p>абзац</p>
	
	<h2>загаловак</h2>
	<p>абзац</p>
	
	<h2>загаловак</h2>
	<p>абзац</p>
	
	<h2>загаловак</h2>
	<p>абзац</p>
</div>

h2:nth-of-type(even) {
	color: red;
}

Прыклад

Знойдзем усе няцотныя h2:

<div>
	<h2>загаловак</h2>
	<p>абзац</p>
	
	<h2>загаловак</h2>
	<p>абзац</p>
	
	<h2>загаловак</h2>
	<p>абзац</p>
	
	<h2>загаловак</h2>
	<p>абзац</p>
	
	<h2>загаловак</h2>
	<p>абзац</p>
</div>

h2:nth-of-type(odd) {
	color: red;
}