【:lang擬似クラス】指定の言語コードで始まる要素に適用する

:lang擬似クラスでは、特定の要素のlang属性の値が指定した言語コードで始まっている場合にスタイルを適用します。 例えば*:lang(en){}と指定した場合であれば、lang属性の値が「en」「en-US」「en-cockney」などの要素に対してスタイルが適用されます。

このように:lang擬似クラスでは、ハイフン「-」区切りのサブコードの指定があった場合でも、ハイフンの前が一致しているだけで適用されます。 なおこの属性セレクタは、要素名[属性名|="属性値"](E[hreflang|="en"])の形式とほぼ同じとなります。

※Internet Explorer(IE)7は:langに対応していませんが、E[hreflang|="en"]には対応しています。

また言語コードにはja(日本語)、en(英語)、fr(フランス語)、zh(中国語)などがあります。

書式

  • 要素名:lang(言語コード) {プロパティ名:値;} ……… 指定の言語コードで始まる要素に適用する

使用した時の例

p:lang(en) {color: red;}
<p>The color will change if the specified language</p>
<p lang="en">[en]The color will change if the specified language</p>
<p lang="en-US">[en-US]The color will change if the specified language</p>

ブラウザ上の表示例

The color will change if the specified language

[en]The color will change if the specified language

[en-US]The color will change if the specified language

対応ブラウザなどのデータ

適用対象 指定の言語コードで始まる要素
対応ブラウザ Internet Explorer8~ , Google Chrome1~ , Firefox1~ , Opera8~ , Safari3.1~

関連情報