Selektory#

Selektor atrybutu o określonej cząstce 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ść zawiera (w dowolnym jej miejscu) przynajmniej jedno wystąpienie "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 łańcuchem znakowym "example" w dowolnym miejscu wartości, np. "bigexample1", "start 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ślonej cząstce 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 class="big car-1-2-3">Akapit powinien mieć kolor zielony (class="big 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ślonej cząstce w wartości (H2) Specyfikacje i inne materiały (H3)