Selektory#

Selektor atrybutu o określonym początku 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ść rozpoczyna się od "val". Jeśli "val" 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 z wartością rozpoczynającą się od "example", np. "example1", "example 2", "example important", itd.:

  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 początku 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^=car][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^=car-1] {color: green;}
		[class^=car][id^=test] {color: red;}
		[class^="cars"] {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 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 początku w wartości (H2) Specyfikacje i inne materiały (H3)