CSS3

疑似クラス

:lang()

  編集:2022.07.09 by T.A.

mdn

言語に一致なら。

E:lang()
E 該当させる要素。
¶一致させる言語コード文字列。

文書言語において、要素の内容言語(自然言語、人が話す言語)を決定する方法が指定されている場合、その内容言語に基づく要素を表現する選択子を書くことも可能になる。
:lang() 疑似クラスは、その引数に挙げられた、いずれかの言語に属する要素を表現する。
引数は 1 個以上の言語範囲からなるカンマで分離されたリストで与えられる。選択子が有効になるためには、:lang() の中の各 言語範囲 が、妥当な[<ident> または <string>]でなければならない(例えば、アスタリスクを包含する言語範囲は、正しくエスケープするか、文字列として引用符で括られなければならない ― :lang(\*-Latn):lang("*-Latn") のように)。

要素の内容言語は、文書言語が定義する。例えば HTML [HTML5] では、内容言語は[lang 属性、META 要素からの情報、場合によってはプロトコル(例えば HTTP ヘッダからの)]の組み合せから決定される。XML 言語 [XML10] では、xml:lang 属性を利用して、要素の言語情報を指示できる。

要素の内容言語は、[[BCP47] 構文として表現される下で、[RFC4647] § 3.3.2 Matching of Language Tags(“言語タグの照合”)の extended filtering(“拡張絞り込み”)演算により与えられる language range(“言語範囲”)に合致する]とき、言語範囲に合致するとされる。この照合は、ASCII 大小無視の下で遂行される。
この比較においては、言語範囲が妥当な言語コードである必要は無い。

注記: 文書およびプロトコルにおいては、[BCP47] またはその後継版のコードを利用して、あるいは XML [XML10] に基づく文書においては、xml:lang 属性を通して、言語を指示することが推奨される。“FAQ: 2 文字または 3 文字の言語コード”を見よ。

次のうち最初の 2 つの選択子は、順に、ベルギー・フランス語、ドイツ語 で書かれた HTML 文書を表現し、その次の 2 つの選択子は、それぞれの言語に属する任意の要素の子である“引用文” Q 要素を表現する:
html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > q

¶他の例を省く

以下のCSSが組み込んであります:

<SPAN class=Test lang="ja">テスト</SPAN><BR>
<SPAN class=Test lang="en">テスト</SPAN><BR>
<SPAN class=Test lang="en-US">テスト</SPAN><BR>

<SPAN class=Test2 lang="en">テスト</SPAN><BR>
<SPAN class=Test2 lang="en-US">テスト</SPAN><BR>
<SPAN class=Test2 lang="en-au">テスト</SPAN><BR>

<SPAN class=Test3 lang="en">テスト</SPAN><BR>
<SPAN class=Test3 lang="en-US">テスト</SPAN><BR>
<SPAN class=Test3 lang="en-au">テスト</SPAN><BR>

<SPAN class=Test4 lang="en">テスト</SPAN><BR>
<SPAN class=Test4 lang="en-US">テスト</SPAN><BR>
<SPAN class=Test4 lang="en-au">テスト</SPAN><BR>


テスト
別画面に表示させて。
HTML:

ここに表示
¶[Edge]○
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: