Pseudoclasa nth-of-type

Pseudoclasa nth-of-type selectează un element, care este al n-lea descendent de tipul specificat.

Adică, dacă scriu h2:nth-of-type(4) - va fi găsit al 4-lea h2 în părinte (spre deosebire de nth-child, care va găsi doar acel h2, care este al 4-lea element în părinte).

Sintaxă

selector:nth-of-type(număr | odd | even | expresie){

}

Valori

Valoare	Descriere
număr	Un număr pozitiv începând cu `1`. Specifică numărul elementului, căruia dorim să-i aplicăm stilul. Numerotarea elementelor începe de la `1`.
`odd`	Elementele impare.
`even`	Elementele pare.
expresie	Se pot compune expresii speciale cu litera n, care reprezintă toate numerele întregi de la zero (nu de la unu) până la infinit. Deci, `2n` înseamnă toate numerele pare (începând cu al doilea). Cum să înțelegem asta? Înlocuim `n` secvențial cu numere de la `0` și așa mai departe: dacă n = 0, atunci 2n dă 0 - un astfel de element nu există (numerotarea elementelor începe de la 1), dacă n = 1, atunci 2n dă 2 - al doilea element, dacă n = 2, 2n dă 4 - al patrulea element. Dacă scriem 3n - acesta va fi fiecare al treilea element (începând cu al treilea), și așa mai departe.

Exemplu

Să găsim h2, care este al 2-lea h2 în părinte:

<div>
	<h2>titlu</h2>
	<p>paragraf</p>
	
	<h2>titlu</h2>
	<p>paragraf</p>
	
	<h2>titlu</h2>
	<p>paragraf</p>
</div>

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

Exemplu

Să găsim toate h2 pare:

<div>
	<h2>titlu</h2>
	<p>paragraf</p>
	
	<h2>titlu</h2>
	<p>paragraf</p>
	
	<h2>titlu</h2>
	<p>paragraf</p>
	
	<h2>titlu</h2>
	<p>paragraf</p>
	
	<h2>titlu</h2>
	<p>paragraf</p>
</div>

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

Exemplu

Să găsim toate h2 impare:

<div>
	<h2>titlu</h2>
	<p>paragraf</p>
	
	<h2>titlu</h2>
	<p>paragraf</p>
	
	<h2>titlu</h2>
	<p>paragraf</p>
	
	<h2>titlu</h2>
	<p>paragraf</p>
	
	<h2>titlu</h2>
	<p>paragraf</p>
</div>

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