Selektory#

Pseudokalsa n-tego dziecka tego samego typu (normalna kolejność)#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:nth-of-type(An+B) { /* deklaracje */ }

Pseudoklasa :nth-of-type() reprezentuje elementy, które są dziećmi (tego samego typu) w innym elementach, zgodnie z cyklem określanym przez argument. Argumentem może być pojedyncza notacja An+B. Pseudoklasa indeksuje elementy w normalnej kolejności.

Poniższe selektory wybierają dowolne elementy będące dziećmi tego samego typu w innych elementach, z zachowaniem odpowiedniego cyklu:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:nth-of-type(n)		/* każde kolejne dziecko tego samego typu */
:nth-of-type(2n)	/* co drugie dziecko tego samego typu */
:nth-of-type(2n+1)	/* nieparzyste dzieci tego samego typu */
:nth-of-type(5n+3)	/* co piąte dziecko tego samego typu zaczynając od trzeciego */

Oczywiście całość można odpowiednio zawęzić. Następujący selektor wybiera parzyste elementy p, które są dziećmi tego samego typu w elementach div:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
div > p:nth-of-type(even)

Trzeba dobrze zrozumieć powyższy zapis. Wszystkie dzieci w elemencie div podlegają indeksowaniu (każdy typ osobno), ale wybierane będą tylko te akapity, które mają parzystą wartość:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<div>
	<p>Akapit</p>		<!-- Indeks 1 (Typ P) -->
	<p>Akapit</p>		<!-- Indeks 2 (Typ P, wybrano) -->
	<hr>				<!-- Indeks 1 (Typ HR) -->
	<p>Akapit</p>		<!-- Indeks 3 (Typ P) -->
	<p>Akapit</p>		<!-- Indeks 4 (Typ P, wybrano) -->
	<p>Akapit</p>		<!-- Indeks 5 (Typ P) -->
	<hr>				<!-- Indeks 2 (Typ HR) -->
	<p>Akapit</p>		<!-- Indeks 6 (Typ P, wybrano) -->
</div>

W przypadku prostszych wariantów użycia :nth-of-type() możemy uzyskać identyczne rezultaty, jak w pseudoklasie :nth-match(), choć w rzeczywistości ta druga pseudoklasa jest bardziej uniwersalna.

Wszystkie najważniejsze kwestie związane z pseudoklasami indeksowania opisałem przy omawianiu mikroskładni An+B (koniecznie przeczytaj).

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<style>

		div :nth-of-type(2n+1) {color: red;}
		div p:nth-of-type(even) {color: blue;}

	</style>

</head>

<body>

	<div>
		<p>Pierwszy akapit (kolor czerwony).</p>	<!-- Indeks 1 (typ P) -->
		<div>Pierwszy blok (kolor czerwony).</div>	<!-- Indeks 1 (typ DIV) -->
		<div>Drugi blok (kolor czarny).</div>		<!-- Indeks 2 (typ DIV) -->
		<p>Drugi akapit (kolor niebieski).</p>		<!-- Indeks 2 (typ P) -->
		<p>Trzeci akapit (kolor czerwony).</p>		<!-- Indeks 3 (typ P) -->
		<p>Czwarty akapit (kolor niebieski).</p>	<!-- Indeks 4 (typ P) -->
		<div>Trzeci blok (kolor czerwony).</div>	<!-- Indeks 3 (typ DIV) -->
		<p>Piąty akapit (kolor czerwony).</p>		<!-- Indeks 5 (typ P) -->
		<div>Czwarty blok (kolor czarny).</div>		<!-- Indeks 4 (typ DIV) -->
		<div>Piąty blok (kolor czerwony).</div>		<!-- Indeks 5 (typ DIV) -->
	</div>

	<hr>

	<div>
		<p>Pierwszy akapit (kolor czerwony).</p>	<!-- Indeks 1 (typ P) -->
		<p>Drugi akapit (kolor niebieski).</p>		<!-- Indeks 2 (typ P) -->
		<p>Trzeci akapit (kolor czerwony).</p>		<!-- Indeks 3 (typ P) -->
		<p>Czwarty akapit (kolor niebieski).</p>	<!-- Indeks 4 (typ P) -->
		<p>Piąty akapit (kolor czerwony).</p>		<!-- Indeks 5 (typ P) -->
	</div>

</body>

</html>

Na podstawie drugiego elementu div powyższego przykładu widać wyraźnie, że w przypadku elementów z dziećmi tylko jednego typu pseudoklasa :nth-of-type() działa identycznie jak pseudoklasa :nth-child().

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Pseudokalsa n-tego dziecka tego samego typu (normalna kolejność) (H2) Specyfikacje i inne materiały (H3)