Selektory#

Wskaźnik tematu selektora#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
!E > F { /* deklaracje */ }

Elementy drzewa dokumentu, które są reprezentowane przez selektor, są nazywane tematami # (subjects) tego selektora. Innymi analogicznymi określeniami mogą być podmioty lub obiekty.

Domyślnie, tematami selektorów są elementy wskazywane przez ostatni selektor złożony w selektorze. Tak więc selektor składający się z pojedynczego selektora złożonego reprezentuje każdy element spełniający jego wymagania. Poprzedzenie sekwencji kolejnym selektorem złożonym i kombinatorem nakłada dodatkowe ograniczenia dopasowania, tak, że tematami selektorów są zawsze podzbiory elementów reprezentowane przez ostatni selektor złożony.

Jako funkcja kompletnego profilu selektorów, temat selektora może być jawnie ustalany za pomocą poprzedzającego znaku wykrzyknika (U+0021, !) dla jednego z selektorów złożonych w selektorze. Znak wykrzyknika będzie traktowany jak wskaźnik tematu # (subject indicator). Chociaż struktura elementu, którą selektor reprezentuje, jest taka sama z/bez wykrzyknika, wskazując temat w ten sposób można wybrać, który selektor złożony będzie reprezentował temat w tej strukturze.

Wciąż trwa dyskusja, czy znak wykrzyknika powinien występować przed/za tematem, czy zezwolić na oba warianty, czy zamiast pojedynczego wykrzyknika nie stosować podwójnego, żeby odróżniać logikę "! = not", itd.

Wskaźniki tematów, podobnie zresztą jak kombinatory, nie odgrywają żadnej roli przy wyliczaniu specyficzności selektorów.

Dla przykładu, poniższy selektor reprezentuje element LI, który jest unikatowym dzieckiem w uporządkowanej liście OL:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
OL > LI:only-child

Jednakże poniższy selektor reprezentuje uporządkowaną listę OL, która zawiera unikatowe dziecko w postaci elementu LI:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
!OL > LI:only-child

Struktury drzewa reprezentowane przez te dwa selektory są takie same, ale tematy selektorów już nie.

Jeśli wiele wskaźników tematów jest obecnych w selektorze, to tematami selektorów są elementy reprezentowane przez wszystkie selektory złożone poprzedzone wskaźnikiem tematów.

Dla przykładu, poniższy selektor reprezentuje wszystkie akapity z klasą "warning" zawarte w elemencie div, jak i zawierające je elementy div:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
!div > !p.warning

Mechanizmu wyboru tematów nie można traktować w ramach tzw. selektora rodzica. Powielanie takich informacji jest po prostu błędne. W niektórych przypadkach zmiana tematu może wyglądać i działać jak selektor rodzica (np. !div > p), ale to wyjątek nie stanowiący reguły. Wystarczy przeanalizować najprostszy wariant selektora w postaci !p, który tak naprawdę żadnego rodzica elementu <p> nie wybiera, i będzie traktowany po prostu jak selektor p.

Na chwilę obecną żadna aktualna przeglądarka nie udostępnia możliwości wyboru tematów w selektorach. W zasadzie jest to opcja właściwa dla kompletnego profilu CSS, więc testy w pierwszej kolejności należałoby przeprowadzać w implementacjach korzystających z tego profilu, np. za pomocą API selektorów.

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>

		!#akapit1 strong {color: blue;}
		#akapit2! strong {color: red;}

	</style>

	<script>

		window.onload = function(){

			document.querySelector("!#akapit3 strong").style.color = "yellow";
			document.querySelector("#akapit4! strong").style.color = "green";

		}

	</script>

</head>

<body>

	<p id="akapit1">Akapit1 ma kolor niebieski, <strong>mocna emfaza wewnątrz akapitu też (dziedziczy z akapitu)</strong>, i znów akapit.</p>

	<p id="akapit2">Akapit2 ma kolor czerwony, <strong>mocna emfaza wewnątrz akapitu też (dziedziczy z akapitu)</strong>, i znów akapit.</p>

	<p id="akapit3">Akapit3 ma kolor żółty, <strong>mocna emfaza wewnątrz akapitu też (dziedziczy z akapitu)</strong>, i znów akapit.</p>

	<p id="akapit4">Akapit4 ma kolor zielony, <strong>mocna emfaza wewnątrz akapitu też (dziedziczy z akapitu)</strong>, i znów akapit.</p>

</body>

</html>

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Wskaźnik tematu selektora (H2) Specyfikacje i inne materiały (H3)