Selektory#

Selektor atrybutu o określonym słowie w 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, którego wartością jest listą słów rozdzielonych białymi znakami, i jednym z nich jest dokładnie "val". Jeśli "val" zawiera białe znaki lub jest pustym łańcuchem znakowym, to dopasowanie nigdy nie będzie miało miejsca.

Następujący selektor atrybutu dopasowuje wszystkie elementy zawierające atrybut title ze słowem "example" w wartości:

  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ślonym słowie w 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 i słów w wartościach, zarówno w selektorze jak i w elemencie, jest nieistotna.

Za pomocą tego selektora atrybutu można symulować selektor klasy (efekt działania jest identyczny):

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
p.pastoral.marine

/* co jest równoważne */

p[class~=pastoral][class~=marine]

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~=""] {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="ktos cos">Akapit powinien mieć kolor zielony (class="ktos cos").</p>

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

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

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

</body>

</html>

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Selektor atrybutu o określonym słowie w wartości (H2) Specyfikacje i inne materiały (H3)