Selektory#

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

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

Pseudoklasa :nth-match() reprezentuje elementy, które są dziećmi (wybranego typu) w innym elementach, zgodnie z cyklem określanym przez argument. Argument ma postać połączonej notacji An+B, części " of " oraz listy selektorów, która określa wybierany typ. Lista selektorów jest traktowana jak unia poleceń. Pseudoklasa indeksuje elementy w normalnej kolejności.

W przypadku szybkiego profilu CSS jedynie listy selektorów złożonych są dozwolone w obrębie :nth-match(), bez kombinatorów. Kompletny profil CSS zezwala na stosowanie selektorów kompleksowych.

Poniższe selektory wybierają elementy będące dziećmi wybranego 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-match(n of *)			/* każde kolejne dziecko dowolnego typu */
:nth-match(n of ul)			/* każde kolejne dziecko typu UL */
:nth-match(2n of p)			/* co drugie dziecko typu P */
:nth-match(2n+1 of div)		/* nieparzyste dzieci typu DIV */
:nth-match(5n+3 of .test)	/* co piąte dziecko z klasą 'test' zaczynając od trzeciego */

Pseudoklasa przeprowadza dopasowanie (na podobnej zasadzie jak :matches), czyli pozwala zapisać kilka selektorów w krótszej postaci:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:nth-match(2n of ol, span)

/* jest równoważne */

:nth-match(2n of ol), :nth-match(2n of span)

/* i w konsekwencji */

:nth-match(2n of ol)
:nth-match(2n of span)

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

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

Trzeba dobrze zrozumieć powyższy zapis. Wszystkie dzieci w elemencie div podlegają indeksowaniu (każdy przekazany typ osobno), ale wybierane będą tylko te akapity i poziome linie, 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 class="foo">Akapit</p>		<!-- Indeks 1 (typ P.foo) -->
	<p class="foo">Akapit</p>		<!-- Indeks 2 (typ P.foo, wybrano) -->
	<hr>							<!-- Indeks 1 (typ HR) -->
	<p class="foo">Akapit</p>		<!-- Indeks 3 (typ P.foo) -->
	<p>Akapit</p>
	<p class="foo">Akapit</p>		<!-- Indeks 4 (typ P.foo, wybrano) -->
	<hr>							<!-- Indeks 2 (typ HR, wybrano) -->
	<p>Akapit</p>
</div>

Pseudoklasa :nth-match() pozwala na tworzenie bezużytecznych selektorów. Zapis foo:nth-match(n of bar) nigdy nie dopasuje żadnego elementu. Z kolei selektor foo:nth-match(n of foo) jest równoważny :nth-match(n of foo), ale o wyższej specyficzności, co można wykorzystać do "awaryjnego podbicia" całkowitej specyficzności selektora.

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-match(2n+1 of p.foo,div) {color: red;}

	</style>

</head>

<body>

	<div>
		<p class="foo">Pierwszy akapit (kolor czerwony).</p>	<!-- Indeks 1 (typ P.foo, wybrano) -->
		<div>Pierwszy blok (kolor czerwony).</div>				<!-- Indeks 1 (typ DIV, wybrano) -->
		<div>Drugi blok (kolor czarny).</div>					<!-- Indeks 2 (typ DIV) -->
		<p class="foo">Drugi akapit (kolor czarny).</p>			<!-- Indeks 2 (typ P.foo) -->
		<p class="foo">Trzeci akapit (kolor czerwony).</p>		<!-- Indeks 3 (typ P.foo, wybrano) -->
		<p>Czwarty akapit (kolor czarny).</p>
		<div>Trzeci blok (kolor czerwony).</div>				<!-- Indeks 3 (typ DIV, wybrano) -->
		<p>Piąty akapit (kolor czarny).</p>
		<div>Czwarty blok (kolor czarny).</div>					<!-- Indeks 4 (typ DIV) -->
		<div>Piąty blok (kolor czerwony).</div>					<!-- Indeks 5 (typ DIV, wybrano) -->
		<p class="foo">Szósty akapit (kolor czarny).</p>		<!-- Indeks 4 (typ P.foo) -->
		<p class="foo">Siódmy akapit (kolor czerwony).</p>		<!-- Indeks 5 (typ P.foo, wybrano) -->
	</div>

</body>

</html>

Na chwilę obecną żadna aktualna przeglądarka nie obsługuje pseudoklasy :nth-match().

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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