Selektory#

Pseudokalsa ostatniego dziecka#

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

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

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

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

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

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

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

<!-- Fragment2 -->
<div class="uwaga">
	<p>Element P wewnątrz uwagi (ale nie ostatnie dziecko).</p>
	<hr>
</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:last-child	/* a jest ostatnim dzieckiem dowolnego elementu */
a:last-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 :last-child {border: 5px solid red;}
		div p:last-child {color: blue;}

	</style>

</head>

<body>

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

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

</body>

</html>

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

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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