トップページの中の セレクタの中の 言語擬似クラス (E:lang(fr))

言語擬似クラス (E:lang(fr))

  • 最終更新:2009年7月 7日 13:20

言語疑似クラスは、特定の要素のlang属性の値が一致した場合にスタイルが適用されます。
また、ハイフン(-)区切りでサブコードの指定が有った場合にも前方一致で適用されます。
このセレクタは、属性セレクタのパターンE[hreflang|="en"]とほぼ同じです。

対応ブラウザ
  • IE6未対応
  • IE7未対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

言語擬似クラスのサンプル

: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も対応していません。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ