Псевдокласс 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;
}