[29] 選択子の :lang(言語タグ) 擬似クラスは、 指定された言語の要素と一致します。

仕様書

意味

[61] :lang() 擬似クラスは、要素の自然言語が指定された値と等しいか、 または指定された値の後に - が続いている時、その要素と一致します。 ここで要素の自然言語は文書言語によって定義されるものであり、必要に応じて BCP 47 の言語タグの構文に正規化したもの、とされています。 >>59

[73] WebVTT では、WebVTT内部節点オブジェクトは WebVTT節点オブジェクトの適用可能な言語によって言語が決まります >>72。

[74] つまり <lang> によって指定された言語 (の継承を考慮したもの) が :lang() の一致の判定に用いられます。

[3] 関連: 言語タグの一致

構文

[63] :lang の直後に括弧で括って言語タグを指定する必要があります。

[66] 言語タグは CSS の識別子でなければなりません。 言語タグとして正しいものである必要はありません。 >>59

大文字と小文字

[64] lang の部分はASCII大文字・小文字不区別です。

[65] 言語タグもASCII大文字・小文字不区別です >>59。

要素の言語

[33] 一致判定の対象となる、文書木側の言語の情報源は、 文書のマーク付け言語によって異なります。 HTML では lang 属性や HTTP からの情報が使われますし、 XML では xml:lang 属性やマーク付け言語依存の方法で得られた情報が使われます。 CSS 2, CSS 2.1, Selectors3 >>59

[62] ... という話は仕様書では例として挙げられているだけのようで、 詳細は各マーク付け言語の仕様が規定するべきということと思われます。 但し CSS 2.1 や選択子3では、各文書やプロトコルで BCP 47 の言語札を使うことや XML では xml:lang 属性を使うことが推奨されています >>59。

妥当性

[67] 構文的に正しくないと非妥当です。例えば言語タグが指定されていないと非妥当です >>59。

歴史

[31] :lang(C) で、 C は言語札を指定します。言語札として CSS 2 勧告では HTML 4.0 と RFC 1766 が、選択子勧告候補 Selectors3 CR では HTML 4.01 と RFC 3066 が参照されています。 HTML 4 は RFC 1766 を参照しています。

CSS 2.1 作業原案はハイフン区切りの文字列とだけ規定しています。 また、空文字列でもよく、その場合何と一致するかは未定義とされています。

メモ: 執筆の時点で Selectors 勧告候補は CSS 2.0 勧告に基づいた規定になっており、次の原案で CSS 2.1 作業原案における改訂を反映するものと思われます。

CSS2

  • [70] Selectors ( 版) http://www.w3.org/TR/1998/PR-CSS2-19980324/selector.html#x40
  • [30] CSS 2
    • 5.11.4 The language pseudo-class: :lang http://www.w3.org/TR/CSS2/selector.html#lang

[71] >>70 で追加されました。

選択子3

  • [60] Selectors
    • 6.6.3 The language pseudo-class :lang http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#lang-pseudo

[32] :lang(C) 擬似クラスと言語との一致の判定は 属性選択子の |= 演算子と同じ方法によります。 CSS 2, CSS 2.1 という規定がなぜか Selectors 勧告候補にはありませんでした。

WebVTT

  • [75] Web Applications 1.0 r7504 Add <lang> to WebVTT. ( 版) http://html5.org/tools/web-apps-tracker?from=7503&to=7504

[76] >>75 で <lang> が定義されたのに伴い、 :lang() との対応も規定されることになりました。

関連

[68] 属性選択子で |= を指定した場合と同じように機能しますが、 :lang は実装が知っている文書の意味に基づき効果が及ぶ点が異なっています >>59。

[69] 例えば :lang(ja) は lang 属性が ja である要素だけでなく、 (それを継承している) 子孫の要素にも一致します。 また lang 属性が明示されていなくても、 HTTP の Content-Language 欄に指定されていれば、それを継承している要素にも一致します。 更に lang と xml:lang が混在していても正しく動作します。

[77] XPath 1.0 にも lang() 関数があり、同じように使うことができますが、 XPath は XML の xml:lang 属性しか考慮しておらず若干動作が異なります。

メモ

[34] 巷の CSS の解説の中には、

:lang(ja)

と

[lang|="ja"]

が同じだとしているものがありますが、 >>32 や >>33 の通り同じではありません。 似たような意味を持つことは確かですが、 似ているからこそ読者の誤解を招かないように正確な解説を心がけるべきです。

[1] Safari 9.0 ( 版) https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW34

The following CSS4 selectors are now fully supported by Safari.

:lang

[2] [selectors-4] Defer to css-text for definition of content language so… (fantasai著, ) https://github.com/w3c/csswg-drafts/commit/9eed0f927a7a5baea1d86737d15a96c1365cde00