Selektory#

Pseudokalsa pierwszego dziecka tego samego typu#

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

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

Poniższy selektor wybiera dowolne elementy będące pierwszymi 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. #
:first-of-type

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

Powyższy selektor wybierze akapit z pierwszego jaki i z drugiego fragmentu strukturalnego, bo są one pierwszymi dziećmi o identycznym typie:

  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 tego samego typu).</p>
	<h2>Uwaga</h2>
</div>

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

</body>

</html>

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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