Selektory#

Pseudokalsa kierunkowości#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:dir(ltr|rtl) { /* deklaracje */ }

Pseudoklasa :dir() reprezentują elementy w oparciu o ich kierunek tekstu, jak określono w języku dokumentu. Dla przykładu, HTML5 definiuje, jak ustalać kierunkowość elementu na podstawie atrybutu dir, otaczającego tekstu lub innych czynników. Pseudoklasa :dir() nie wybiera elementów na podstawie stanu wizualnego, czyli CSS-owa właściwość direction nie wpływa na dopasowanie.

Pseudoklasa :dir(ltr) reprezentuje elementy z kierunkowością lewo-prawo (left-to-right). Pseudoklasa :dir(rtl) reprezentuje elementy z kierunkowością prawo-lewo (right-to-left). Argument :dir() musi być pojedynczym identyfikatorem CSS, w przeciwnym razie selektor jest nieprawidłowy. Białe znaki między identyfikatorem a nawiasami są opcjonalne i nie mają specjalnego znaczenia. Wartości inne niż ltr i rtl nie są błędne, ale nie dopasowują niczego. Jeśli przyszłe specyfikacje dla znaczników zdefiniują dodatkowe kierunkowości, to specyfikacja selektorów może zezwolić na późniejsze ich użycie.

Kilka przykładowych pseudoklas z kierunkowością rtl:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:not(rtl)			/* wszystkie elementy */
body:dir(rtl)		/* element BODY */
div:dir(rtl)		/* element DIV */
span:dir(rtl)		/* element SPAN */

Różnica między pseudoklasą :dir(C) i selektorem atrybutu [dir=C] jest taka, że selektor atrybutu wykonuje porównanie na podstawie atrybutu jawnie umieszczonego w elemencie, kiedy pseudoklasa kierunkowości opiera swoją wiedzę na podstawie semantyczności dokumentu wprost z aplikacji klienckiej. Dla przykładu, w HTML-u kierunkowość elementu jest dziedziczona, więc dziecko bez atrybutu dir będzie miało tę samą kierunkowość, jak jego najbliższy przodek z prawidłowym atrybutem dir. W dodatku, element z atrybutem dir="auto", co jest nowością HTML5, będzie pasował do :dir(ltr) lub :dir(rtl), w zależności od ustalonej kierunkowości zawartych w nim elementów.

W ramach uzupełnienia warto zapoznać się z obszernym materiałem umieszczonym w kursie HTML 4.01 (dział "Języki - Kierunek tekstu").

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>

		#p2:-moz-dir(ltr) {color: blue;}

		#p3:-moz-dir(rtl) {color: green;}

		#p4:-moz-dir(ltr) {color: red;}		/* brak zastosowania */
		#p5:-moz-dir(cos) {color: red;}		/* brak zastosowania */

		#p6:-moz-dir(rtl) {color: orange;}	/* brak zastosowania */
		#p7:-moz-dir(rtl) {color: orange;}	/* brak zastosowania */

		#p8:-moz-dir(rtl) {color: orange;}

		#p9:-moz-dir(rtl) {color: orange;}	/* brak zastosowania */

	</style>

</head>

<body>

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

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

	<p id="p3" dir="rtl">Akapit powinien mieć kolor zielony (id="p3" dir="rtl").</p>

	<p id="p4" dir="rtl">Akapit powinien mieć kolor czarny (id="p4" dir="rtl").</p>
	<p id="p5" dir="cos">Akapit powinien mieć kolor czarny (id="p5" dir="cos").</p>

	<p id="p6" dir="auto"><bdo dir="rtl">ŻARTEM</bdo>. Akapit i zawarte w nim elementy powinny mieć kolor czarny (id="p6" dir="auto").</p>
	<p id="p7" dir="auto"><bdo dir="rtl">ثلاثة ١٢٣٤ خمسة</bdo>. Akapit i zawarte w nim elementy powinny mieć kolor czarny (id="p7" dir="auto").</p>

	<p id="p8" dir="auto">ثلاثة ١٢٣٤ خمسة. Akapit powinien mieć kolor pomarańczowy (id="p8" dir="auto").</p>

	<p id="p9" dir="auto">Akapit powinien mieć kolor czarny (id="p9" dir="auto"). ثلاثة ١٢٣٤ خمسة.</p>

</body>

</html>

Na chwilę obecną żadna aktualna przeglądarka nie obsługuje pseudoklasy :dir(). Można przetestować prefiksowe polecenie :-moz-dir() dla Firefoksa, jak w powyższym przykładzie. Szczególnie interesujące są ostatnie przypadki, gdzie akapitom ustawiłem atrybut dir="auto".

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Pseudokalsa kierunkowości (H2) Specyfikacje i inne materiały (H3)