Selektory#

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

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

Pseudoklasa :nth-last-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 odwrotnej kolejności.

W przypadku szybkiego profilu CSS jedynie listy selektorów złożonych są dozwolone w obrębie :nth-last-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 (od końca), z zachowaniem odpowiedniego cyklu:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:nth-last-match(n of *)			/* każde kolejne dziecko dowolnego typu (od końca) */
:nth-last-match(n of ul)		/* każde kolejne dziecko typu UL (od końca) */
:nth-last-match(2n of p)		/* co drugie dziecko typu P (od końca) */
:nth-last-match(2n+1 of div)	/* nieparzyste dzieci typu DIV (od końca) */
:nth-last-match(5n+3 of .test)	/* co piąte dziecko z klasą 'test' zaczynając od trzeciego (od końca) */

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-last-match(2n of ol, span)

/* jest równoważne */

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

/* i w konsekwencji */

:nth-last-match(2n of ol)
:nth-last-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 (od końca), 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 4 (typ P.foo, wybrano) -->
	<p class="foo">Akapit</p>		<!-- Indeks 3 (typ P.foo) -->
	<hr>							<!-- Indeks 2 (typ HR, wybrano) -->
	<p class="foo">Akapit</p>		<!-- Indeks 2 (typ P.foo, wybrano) -->
	<p>Akapit</p>
	<p class="foo">Akapit</p>		<!-- Indeks 1 (typ P.foo) -->
	<hr>							<!-- Indeks 1 (typ HR) -->
	<p>Akapit</p>
</div>

Pseudoklasa :nth-last-match() pozwala na tworzenie bezużytecznych selektorów. Zapis foo:nth-last-match(n of bar) nigdy nie dopasuje żadnego elementu. Z kolei selektor foo:nth-last-match(n of foo) jest równoważny :nth-last-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-last-match(2n+1 of p.foo,div) {color: red;}

	</style>

</head>

<body>

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

</body>

</html>

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

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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