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