Selektory#

Selektor atrybutu o określonej wartości#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
[att=val] { /* deklaracje */ }

Ten rodzaj selektora atrybutu reprezentuje element z konkretną nazwą atrybutu i określoną wartością "val". Pojawienie się choćby jednego nadmiarowego znaku (nawet białego znaku) w selektorze lub atrybucie powoduje, że dopasowanie nie będzie miało miejsca.

Następujący selektor atrybutu dopasowuje wszystkie elementy zawierające atrybut title z wartością "example":

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
*[title=example]

/* lub po prostu */

[title=example]

Poniższy selektor został dodatkowo zawężony do elementów h1:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
h1[title=example]

Oczywiście można podawać wiele selektorów atrybutów o określonej wartości, i aby dopasowanie miało miejsce, to każdy z nich musi występować w elemencie:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
[class=bold][title=example]

Kolejność występowania atrybutów, zarówno w selektorze jak i w elemencie, jest nieistotna.

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>

		[id=test] {color: blue;}
		[class=cos] {color: green;}
		[class=cos][id=test] {color: red;}
		[class="light juice"] {color: orange;}			/* brak zastosowania */
		[raz="1"][dwa="2"][trzy="3"] {color: orange;}	/* brak zastosowania */

	</style>

</head>

<body>

	<p>Akapit powinien mieć kolor czarny (brak atrybutów).</p>

	<p id="test">Akapit powinien mieć kolor niebieski (id="test").</p>

	<p class="cos">Akapit powinien mieć kolor zielony (class="cos").</p>

	<p id="test" class="cos">Akapit powinien mieć kolor czerwony (id="" class="").</p>

	<p class="light juice twice">Akapit powinien mieć kolor czarny (class="light juice twice").</p>

	<p raz="1" dwa="2">Akapit powinien mieć kolor czarny (raz="" dwa="").</p>

</body>

</html>

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Selektor atrybutu o określonej wartości (H2) Specyfikacje i inne materiały (H3)