Selektory#

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

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

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

Poniższe selektory wybierają dowolne elementy będące dziećmi 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-child(n)		/* każde kolejne dziecko */
:nth-child(2n)		/* co drugie dziecko */
:nth-child(2n+1)	/* nieparzyste dzieci */
:nth-child(5n+3)	/* co piąte dziecko 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 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 1 -->
	<hr>				<!-- Indeks 2 -->
	<hr>				<!-- Indeks 3 -->
	<p>Akapit</p>		<!-- Indeks 4 (wybrano) -->
	<p>Akapit</p>		<!-- Indeks 5 -->
	<p>Akapit</p>		<!-- Indeks 6 (wybrano) -->
	<hr>				<!-- Indeks 7 -->
	<p>Akapit</p>		<!-- Indeks 8 (wybrano) -->
</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-child(2n+1) {color: red;}
		div :nth-child(even) {color: blue;}

	</style>

</head>

<body>

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

	<hr>

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

</body>

</html>

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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