Selektory#

Selektor atrybutu o dowolnej wartości#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
[att] { /* deklaracje */ }

Ten rodzaj selektora atrybutu reprezentuje element z konkretną nazwą atrybutu, niezależnie od wartości tego atrybutu. Często nazywany jest także ogólnym selektorem atrybutu.

Następujący selektor atrybutu dopasowuje wszystkie elementy zawierające atrybut title o dowolnej wartości:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
*[title]

/* lub po prostu */

[title]

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]

Oczywiście można podawać wiele selektorów atrybutów, 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. #
[id][class][title]

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] {color: blue;}
		[class] {color: green;}
		[class] [id] {color: red;}
		[raz][dwa][trzy] {color: orange;}	/* brak zastosowania */

	</style>

</head>

<body>

	<p>Akapit powinien mieć kolor czarny (brak atrybutów).</p>

	<p id="">Akapit powinien mieć kolor niebieski (id="").</p>

	<p class="cos">Akapit powinien mieć kolor zielony (class="cos").</p>

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

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

</body>

</html>

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Selektor atrybutu o dowolnej wartości (H2) Specyfikacje i inne materiały (H3)