Selektory#

Selektor atrybutu o określonym końcu 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ść kończy się na "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ą kończącą się na "example", np. "first example", "very important example", "last example", 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 końcu 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$=audi][id$=test] {color: red;}
		[class$="car "] {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="list car-1">Akapit powinien mieć kolor zielony (class="list car-1").</p>

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

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