Pseudo-klas nth-of-type

Die pseudo-klas nth-of-type kies 'n element wat die n-de nageslag van 'n gegewe tipe is.

Dit is, as ek h2:nth-of-type(4) skryf - sal die 4de h2 in die ouer gevind word (in teenstelling met nth-child, wat slegs daardie h2 sal vind wat die 4de element in die ouer is).

Sintaksis

selekteerder:nth-of-type(nommer | odd | even | uitdrukking){

}

Waardes

Waarde	Beskrywing
nommer	'n Positiewe nommer vanaf `1`. Spesifiseer die nommer van die element waarna ons wil verwys. Nommering van elemente begin vanaf `1`.
`odd`	Onewe elemente.
`even`	Ewe elemente.
uitdrukking	Spesiale uitdrukkings kan saamgestel word met die letter n, wat alle heelgetalle van nul (nie van een nie) tot oneindigheid verteenwoordig. Dus, `2n` - beteken alle ewe nommers (vanaf die tweede). Hoe om dit te verstaan? Vervang `n` opeenvolgend met nommers vanaf `0` ensovoorts: as n = 0, dan gee 2n 0 - daar is nie so 'n element nie (nommering begin by 1), as n = 1, dan gee 2n 2 - die tweede element, as n = 2, gee 2n 4 - die vierde element. As ons 3n skryf - dit sal elke derde element wees (vanaf die derde), ensovoorts.

Voorbeeld

Laat ons die h2 vind wat die 2de h2 in die ouer is:

<div>
	<h2>opskrif</h2>
	<p>paragraaf</p>
	
	<h2>opskrif</h2>
	<p>paragraaf</p>
	
	<h2>opskrif</h2>
	<p>paragraaf</p>
</div>

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

Voorbeeld

Laat ons alle ewe h2 vind:

<div>
	<h2>opskrif</h2>
	<p>paragraaf</p>
	
	<h2>opskrif</h2>
	<p>paragraaf</p>
	
	<h2>opskrif</h2>
	<p>paragraaf</p>
	
	<h2>opskrif</h2>
	<p>paragraaf</p>
	
	<h2>opskrif</h2>
	<p>paragraaf</p>
</div>

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

Voorbeeld

Laat ons alle onewe h2 vind:

<div>
	<h2>opskrif</h2>
	<p>paragraaf</p>
	
	<h2>opskrif</h2>
	<p>paragraaf</p>
	
	<h2>opskrif</h2>
	<p>paragraaf</p>
	
	<h2>opskrif</h2>
	<p>paragraaf</p>
	
	<h2>opskrif</h2>
	<p>paragraaf</p>
</div>

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