Pseudoklasa nth-of-type

Pseudoklasa nth-of-type wybiera element, który jest n-tym potomkiem określonego typu.

To znaczy, jeśli napiszę h2:nth-of-type(4) - zostanie znaleziony 4-ty h2 w rodzicu (w przeciwieństwie do nth-child, który znajdzie tylko ten h2, który jest 4-tym elementem w rodzicu).

Składnia

selektor:nth-of-type(liczba | odd | even | wyrażenie){

}

Wartości

Wartość	Opis
liczba	Dodatnia liczba zaczynając od `1`. Określa numer elementu, do którego chcemy się odwołać. Numeracja elementów zaczyna się od `1`.
`odd`	Elementy nieparzyste.
`even`	Elementy parzyste.
wyrażenie	Można tworzyć specjalne wyrażenia z literą n, która oznacza wszystkie liczby całkowite od zera (nie od jedności) do nieskończoności. Tak, `2n` - oznacza wszystkie parzyste liczby (zaczynając od drugiego). Jak to zrozumieć? Podstawiamy w `n` kolejno liczby od `0` i tak dalej: jeśli n = 0, to 2n da 0 - takiego elementu nie ma (numeracja elementów od 1), jeśli n = 1, to 2n da 2 - drugi element, jeśli n = 2, 2n daje 4 - czwarty element. Jeśli napisać 3n - to będzie co trzeci element (zaczynając od trzeciego), i tak dalej.

Przykład

Znajdźmy h2, który jest 2-gim h2 w rodzicu:

<div>
	<h2>tytuł</h2>
	<p>akapit</p>
	
	<h2>tytuł</h2>
	<p>akapit</p>
	
	<h2>tytuł</h2>
	<p>akapit</p>
</div>

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

Przykład

Znajdźmy wszystkie parzyste h2:

<div>
	<h2>tytuł</h2>
	<p>akapit</p>
	
	<h2>tytuł</h2>
	<p>akapit</p>
	
	<h2>tytuł</h2>
	<p>akapit</p>
	
	<h2>tytuł</h2>
	<p>akapit</p>
	
	<h2>tytuł</h2>
	<p>akapit</p>
</div>

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

Przykład

Znajdźmy wszystkie nieparzyste h2:

<div>
	<h2>tytuł</h2>
	<p>akapit</p>
	
	<h2>tytuł</h2>
	<p>akapit</p>
	
	<h2>tytuł</h2>
	<p>akapit</p>
	
	<h2>tytuł</h2>
	<p>akapit</p>
	
	<h2>tytuł</h2>
	<p>akapit</p>
</div>

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