Selektory#

Pseudokalsa jedynego dziecka tego samego typu#

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

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

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

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

Oczywiście całość można odpowiednio zawęzić. Następujący selektor wybiera elementy p, które są jedynymi dziećmi tego samego typu w elementach div:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
div > p::only-of-type

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

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

<!-- Fragment2 -->
<div class="uwaga">
	<h2>Uwaga</h2>
	<p>Element P wewnątrz uwagi (pierwsze dziecko tego samego typu).</p>
	<p>Element P wewnątrz uwagi (drugie dziecko tego samego typu).</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-of-type	/* a jest jedynym dzieckiem tego samego typu w dowolnym elemencie */
a:only-of-type		/* 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-of-type {border: 5px solid red;}
		div p:only-of-type {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>			<!-- czerwone obramowanie -->
		<p>Pierwszy akapit.</p>		<!-- czerwone obramowanie i niebieski tekst -->
	</div>

	<div>
		<p>Pierwszy akapit.</p>
		<p>Drugi akapit.</p>
	</div>

</body>

</html>

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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