Selektory#

Selektor atrybutu o określonym łączniku 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ść jest równa "val" lub rozpoczyna się od "val", po której następuje znak łącznika (U+002D, -). Selektor przeznaczony jest przede wszystkim do porównywania pierwszego członu w kodach językowych (np. w atrybucie hreflang elementów HTML), jak opisano w dokumencie "BCP 47" lub jego nowszych wersjach.

Następujący selektor atrybutu dopasowuje wszystkie elementy zawierające atrybut hreflang z wartością "en", jaki i "en-us", "en-gb", "en-us-1", itd.:

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

/* lub po prostu */

[hreflang|="en"]

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

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
a[hreflang|="en"]

Oczywiście można podawać wiele selektorów atrybutów o określonym łączniku 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. #
[hreflang|=en][class|=car]

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

W przypadku wybierania elementów z kodami językowymi ustawianymi za pomocą atrybutu lang (lub xml:lang) należy rozważyć użycie pseudoklasy :lang(). W ramach uzupełnienia warto zapoznać się z materiałami umieszczonymi w kursie HTML 4.01 (dział "Języki").

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|=car-1] {color: green;}
		[class|=car][id|=test] {color: red;}
		[class|="car audi"] {color: orange;}	/* brak zastosowania */
		[raz|="" dwa|=""] {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 id="test-1">Akapit powinien mieć kolor niebieski (id="test-1").</p>

	<p class="car-1-2-3">Akapit powinien mieć kolor zielony (class="car-1-2-3").</p>

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

	<p class="car audi a3">Akapit powinien mieć kolor czarny (class="car audi a3").</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 łączniku w wartości (H2) Specyfikacje i inne materiały (H3)