言語擬似クラス (E:lang(fr))
言語疑似クラスは、特定の要素のlang属性の値が一致した場合にスタイルが適用されます。
また、ハイフン(-
)区切りでサブコードの指定が有った場合にも前方一致で適用されます。
このセレクタは、属性セレクタのパターンE[hreflang|="en"]
とほぼ同じです。
- 対応ブラウザ
-
言語擬似クラスのサンプル
:lang(en) {
font-family: Georgia, David, serif;
font-style: italic;
}
blockquote {
margin: 20px 0 10px;
padding: 15px 15px 5px;
border: 5px solid #ccc;
}
blockquote:lang(en) {
margin-top: 10px;
background: #e8e8e8;
color: green;
}
<p>6.6.3 言語擬似クラス:lang</p>
<p lang="en">6.6.3. The language pseudo-class :lang</p>
<p lang="en-US">6.6.3. The language pseudo-class :lang</p>
<blockquote>
<p>
次の二つの選択子は、、、
</p>
</blockquote>
<blockquote lang="en">
<p>
The two following...
</p>
</blockquote>
lang属性の値がen
場合、フォントを変更しています。
また、ハイフン(-
)区切りの前方一致でも適用されるためen-US
にも適用されます。
引用部分も同様に、言語が日本語と英語で違う場合、別のスタイルが適用されるようにしています。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
6.6.3 言語擬似クラス:lang
6.6.3. The language pseudo-class :lang
6.6.3. The language pseudo-class :lang
次の二つの選択子は、ベルギー・フランス語及びドイツ語でのHTML文書を表す。次の二つの選択子は、ベルギー・フランス語、あるいはドイツ語での任意の要素の中のqの引用文を表す。
The two following selectors represent an HTML document that is in Belgian French or German. The two next selectors represent q quotations in an arbitrary element in Belgian French or German.
属性セレクタのパターンE[hreflang|="en"]
は、IE7が対応していますが、言語疑似クラスはIE7も対応していません。