lang擬似クラス

TOPページに戻る > CSS

スポンサード リンク

lang擬似クラス

lang擬似クラスを説明する前にlang属性について説明しておきます。 html要素にはlang属性をつけることできます
lang属性とは国ごとの文字コードを指定できる属性です
例では、ja(日本語)の文字コードを要素に指定します
文字コード例、en (英語) ja (日本語) zh (中国語) ko (韓国語)

lang属性はすべての要素に使えます。

<html lang="ja">
対応ブラウザ ie8 ie9 ie10 ie11 google Chrome safari fire fox opera

lang擬似クラス

htmlのlang属性で指定されている文字コードに対してスタイルを適用できます
文字コードで適用する要素を判定して、その要素を太字に変えたり、文字色を変更したり様々なスタイルを適用できます

※IE6、IE7は、lang擬似クラスに対応していません(IE8から対応しています)

使い方(書式)css
要素名:lang(言語コード) { プロパティ : 値; }

実際の指定方法

cssファイル

p:lang(en) { color : red; }

html部分

<p lang="en">The style only for English</p>

実際の表示

IE6、IE7以外のブラウザで確認してください。文字が赤色になりましたか?

The style only for English


要素を属性セレクタ、classセレクタ、idセレクタで絞り込む


lang擬似クラスはセレクタと併用できます
適用箇所を限定したい場合は最初の要素にclassセレクタ、idセレクタ、属性セレクタをつけます(今回はclassセレクタで)
※html要素に属性がついている場合は属性セレクタが使えるのでソースがすっきりします

cssファイル

p.hoge:lang(en) { color : red; }

html部分

<p class="hoge" lang="en">The style only for English</p>




(C)2012 ホームページ作成無料