Selektory#

Pseudokalsa pierwszego dziecka#

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

Pseudoklasa :first-child reprezentuje element, który jest pierwszym dzieckiem w innym elemencie. Ma identyczne działanie jak pseudoklasa nth-child(1).

Poniższy selektor wybiera dowolne elementy będące pierwszymi dziećmi w innych elementach:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:first-child

Oczywiście całość można odpowiednio zawęzić. Następujący selektor wybiera elementy p, które są pierwszymi 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:first-child

Powyższy selektor wybierze akapit z pierwszego fragmentu strukturalnego, ale pominie ten w drugim fragmencie, gdzie pierwszym dzieckiem elementu div jest h2:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!-- Fragment1 -->
<div class="uwaga">
	<p>Element P wewnątrz uwagi (pierwsze dziecko).</p>
</div>

<!-- Fragment2 -->
<div class="uwaga">
	<h2>Uwaga</h2>
	<p>Element P wewnątrz uwagi (ale nie pierwsze dziecko).</p>
</div>

Można konstruować różne selektory o identycznym działaniu:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
* > a:first-child	/* a jest pierwszym dzieckiem dowolnego elementu */
a:first-child		/* jak wyżej (zakładamy, że a nie jest korzeniem dokumentu) */

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>

		body :first-child {border: 5px solid red;}
		div p:first-child {color: blue;}

	</style>

</head>

<body>

	<div>							<!-- czerwone obramowanie -->
		<p>Pierwszy akapit.</p>		<!-- czerwone obramowanie i niebieski tekst -->
		<p>Drugi akapit.</p>
	</div>

	<div>
		<h2>Nagłówek</h2>			<!-- czerwone obramowanie -->
		<p>Pierwszy akapit.</p>
	</div>

</body>

</html>

W ramach uzupełnienia warto zapoznać się z opisem właściwości Node.firstChild.

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Pseudokalsa pierwszego dziecka (H2) Specyfikacje i inne materiały (H3)