Selektory#

Pseudokalsa językowa#

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

Pseudoklasa :lang() reprezentuje elementy, które są w jednym z języków wymienionych w jej argumencie. Argumentem może być lista jednego lub wielu zakresów językowych rozdzielonych przecinkami. Jeśli język dokumentu precyzuje w jaki sposób (ludzki) język zawartości jest ustalany w elemencie, to pseudoklasa językowa pozwala wybrać element w oparciu o ten język.

Każdy zakres językowy # (language range) wewnątrz :lang() musi być poprawnym identyfikatorem CSS lub składać się z symbolu gwiazdki (U+002A, *), po której następuje identyfikator rozpoczynający się od znaku myślnika (U+002D, -), w przeciwnym razie selektor będzie nieprawidłowy.

Język # (language) elementu jest definiowany przez język dokumentu. Dla przykładu, HTML5 definiuje, jak ustalić język na podstawie atrybutu lang, informacji z elementów meta i ewentualnie z protokołu (np. nagłówków HTTP). Aplikacje XML mogą używać atrybutu xml:lang, aby określić informację o języku dla danego elementu.

Język elementu pasuje do zakresu językowego jeśli język elementu (w razie konieczności znormalizowany do składni BCP 47) pasuje do przekazanego zakresu językowego w operacji rozszerzonego filtrowania (extended filtering), zgodnie z [RFC4647] "Matching of Language Tags (section 3.3.2)". Dopasowanie jest nieczułe na wielkość liter w zakresie ASCII. Do wykonania tego porównania zakres językowy nie musi być poprawnym kodem języka.

Zaleca się, aby dokumenty i protokoły wskazywały języki za pomocą kodów z dokumentu BCP 47 lub jego następcy, i poprzez atrybuty xml:lang w przypadku dokumentów opartych na XML.

Dwa poniższe selektory reprezentują dokument HTML w języku francuskim (Belgia) i niemieckim. Dwa następne selektory reprezentują cytaty q w dowolnym elemencie w języku francuskim (Belgia) i niemieckim:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > q

Jedną z różnic między pseudoklasą :lang(C) i selektorem atrybutu [lang|=] jest to, że selektor atrybutu wykonuje porównanie na podstawie atrybutu jawnie umieszczonego w elemencie, kiedy pseudoklasa językowa opiera swoją wiedzę na podstawie semantyczności dokumentu wprost z aplikacji klienckiej.

W poniższym przykładzie HTML, tylko element body pasuje do selektora [lang|=fr] (ponieważ posiada atrybut lang), ale zarówno body jak i p pasują do pseudoklasy :lang(fr) (bo obydwa są w języku francuskim). Akapit nie pasuje do selektora [lang|=fr] ze względu na brak atrybutu lang:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<body lang=fr>
<p>Je suis français.</p>
</body>

Kolejną różnicą między pseudoklasą :lang(C) i selektorem atrybutu [lang|=] jest to, że :lang(C) wykonuje niejawne dopasowanie wieloznaczne # (wildcard matching). Dla przykładu, pseudoklasa lang(de-DE) pasuje do "de-DE", "de-DE-1996", "de-Latn-DE", "de-Latf-DE", "de-Latn-DE-1996", kiedy selektor [lang|=de-DE] pasuje tylko do "de-DE" i "de-DE-1996".

Aby wykonać dopasowanie wieloznaczne na pierwszym subtagu (głównym języku), należy użyć znaku gwiazdki: argument *-CH pasuje do "de-CH", "it-CH", "fr-CH" i "rm-CH".

Należy pamiętać, że znaków gwiazdki nie można umieszczać nigdzie indziej w składni zakresów językowych pseudoklasy :lang(); są dozwolone i brane pod uwagę jedynie na początku argumentu.

Dopasowanie wieloznaczne dla pseudoklasy :lang() jest nowością w specyfikacji "Selector Lebel 4".

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>

		p:lang(pl) {color: orange;}

		.en:lang(en) {color: blue;}

		.de:lang(de-DE) {color: green;}

		.ch:lang(*-CH) {color: red;}

		.mix:lang(lang1, lang2) {color: purple;}

	</style>

</head>

<body lang="pl">

	<p>Akapit powinien mieć kolor pomarańczowy (dziedziczy język "pl" z BODY).</p>

	<p class="en" lang="en">Akapit powinien mieć kolor niebieski (class="en" lang="en").</p>
	<p class="en" lang="en-us">Akapit powinien mieć kolor niebieski (class="en" lang="en-us").</p>
	<p class="en" lang="en-us-cos">Akapit powinien mieć kolor niebieski (class="en" lang="en-us-cos").</p>

	<p class="de" lang="de-DE">Akapit powinien mieć kolor zielony (class="de" lang="de-DE").</p>
	<p class="de" lang="de-Latf-DE">Akapit powinien mieć kolor zielony (class="de" lang="de-Latf-DE").</p>
	<p class="de" lang="de-Latn-DE-1996">Akapit powinien mieć kolor zielony (class="de" lang="de-Latn-DE-1996").</p>

	<p class="ch" lang="de-CH">Akapit powinien mieć kolor czerwony (class="ch" lang="de-CH").</p>
	<p class="ch" lang="it-CH">Akapit powinien mieć kolor czerwony (class="ch" lang="it-CH").</p>
	<p class="ch" lang="fr-CH-cos">Akapit powinien mieć kolor czerwony (class="ch" lang="fr-CH-cos").</p>

	<p class="mix" lang="lang1">Akapit powinien mieć kolor purpurowy (class="mix" lang="lang1").</p>
	<p class="mix" lang="lang2">Akapit powinien mieć kolor purpurowy (class="mix" lang="lang2").</p>

</body>

</html>

Na chwilę obecną żadna aktualna przeglądarka nie obsługuje listy zakresów językowych i dopasowania wieloznacznego w argumencie pseudoklasy :lang().

W ramach uzupełnienia warto zapoznać się z materiałami umieszczonymi w kursie HTML 4.01 (dział "Języki").

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Pseudokalsa językowa (H2) Specyfikacje i inne materiały (H3)