:lang()

:lang() は CSS の擬似クラスで、指定された言語に基づいて要素に一致します。

css

/* <p> のうち English (en) のものをすべて選択 */
p:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

メモ: HTML では、言語は lang 属性と <meta> 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。

構文

形式文法

:lang( <language-code> )

引数

<language-code>: <string> で、ターゲットにしたい言語を表します。受付可能な値は HTML 仕様書で定義されています。

例

この例では、 :lang() 擬似クラスを使用して引用要素 (<q>) の親を選択するために子結合子を使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 Unicode の値は特殊な引用符を指定するために使用していることに注意してください。

HTML

html

<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="fr">
  <q>This French quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="ja">
  <q>この日本語の引用には内部に<q>入れ子</q>の引用があります。</q>
</div>

CSS

css

:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "« " " »";
}
:lang(ja) > q {
  quotes: "「" "」" "『" "』";
}

結果

仕様書

Specification
Selectors Level 4 # lang-pseudo

ブラウザーの互換性

BCD tables only load in the browser