CSS:lang() 疑似クラス は、要素を定義された言語に基づいて選択します。

/* 英語 (en) の <p> をすべて選択 */
p:lang(en) {
  quotes: '\201C' '\201D' '\2018' '\2019';
}

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

構文

形式文法

:lang( <language-code> )

引数

<language-code>
対象としたい言語を表す <string> です。利用可能な値は HTML の仕様書で定義されています。

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

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="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>

CSS

:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }

結果

仕様書

仕様書 策定状況 コメント
Selectors Level 4
:lang() の定義
草案 ワイルドカードによるマッチングとカンマ区切りの言語リストを追加。
Selectors Level 3
:lang() の定義
勧告 有意な変更なし。
CSS Level 2 (Revision 1)
:lang() の定義
勧告 初回定義。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 8Opera 完全対応 8Safari 完全対応 3.1WebView Android 完全対応 1Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 8Safari iOS 完全対応 3.1Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, sutara79, ethertank, sosleepy
最終更新者: mfuji09,