Selektory#

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

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

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

Poniższe selektory wybierają dowolne elementy będące dziećmi 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-child(n)		/* każde kolejne dziecko (od końca) */
:nth-child(2n)		/* co drugie dziecko (od końca) */
:nth-child(2n+1)	/* nieparzyste dzieci (od końca) */
:nth-child(5n+3)	/* co piąte dziecko zaczynając od trzeciego (od końca) */

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

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

Trzeba dobrze zrozumieć powyższy zapis. Wszystkie dzieci w elemencie div podlegają indeksowaniu (niezależnie od ich typu), 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 8 (wybrano) -->
	<hr>				<!-- Indeks 7 -->
	<hr>				<!-- Indeks 6 -->
	<p>Akapit</p>		<!-- Indeks 5 -->
	<p>Akapit</p>		<!-- Indeks 4 (wybrano) -->
	<p>Akapit</p>		<!-- Indeks 3 -->
	<hr>				<!-- Indeks 2 -->
	<p>Akapit</p>		<!-- Indeks 1 -->
</div>

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-child(4n+1) {color: red;}
		div :nth-last-child(even) {color: blue;}

	</style>

</head>

<body>

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

	<hr>

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

</body>

</html>

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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