Selektory#

Pseudokalsa jedynego dziecka#

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

Pseudoklasa :only-child reprezentuje element, który jest jedynym dzieckiem w innym elemencie. Ma identyczne działanie jak selektory :first-child:last-child lub :nth-child(1):nth-last-child(1), ale o mniejszej specyficzności.

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

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

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

Powyższy selektor wybierze akapit z pierwszego fragmentu strukturalnego, ale pominie ten w drugim fragmencie, gdzie element div ma więcej niż jedno dziecko:

  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 (jedyne dziecko).</p>
</div>

<!-- Fragment2 -->
<div class="uwaga">
	<h2>Uwaga</h2>
	<p>Element P wewnątrz uwagi (dziecko, ale nie jedyne).</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:only-child	/* a jest jedynym dzieckiem dowolnego elementu */
a:only-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>

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

	</style>

</head>

<body>

	<div>
		<h2>Nagłówek</h2>			<!-- czerwone obramowanie -->
	</div>

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

	<div>
		<h2>Nagłówek</h2>
		<p>Pierwszy akapit.</p>
	</div>

</body>

</html>

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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