lang()疑似クラス・セレクタ(lang() pseudo-class selector)
アセンブラの魔女 ⧫ CSS ⧫ セレクタ ⧫ セレクタの種類 ⧫ lang()疑似クラス・セレクタ
アセンブラの魔女 ⧫ CSS ⧫ セレクタ ⧫ セレクタの種類 ⧫ lang()疑似クラス・セレクタ

 ang()疑似クラス・セレクタ(lang() pseudo-class selector)は、要素 E が指定言語 Cc であれば、その要素にスタイルを適用します。

E:lang(C)

 ドキュメント言語(HTMLなど)で、要素の言語(プログラミング言語ではなく人間言語(human language))の指定方法が定義されている場合は、その言語仕様に基づいて要素に一致するセレクタをCSSで記述することができます。

 たとえばHTMLでは、ドキュメント上の人間言語は次のような方法で決まります。

  • lang属性
  • META要素
  • プロトコル(HTTPヘッダーなど)の情報の組み合わせ

 XMLでは、xml:langと呼ばれる属性により言語を決定します。

 lang(C疑似クラスは、要素の言語がC場合にマッチします。言語を指定するためのCは、要素のハイフンで区切られた言語識別文字列("ja-JP"など)の部分文字列と比較し、マッチするかどうかが決定します。ASCII範囲内の文字については大文字と小文字は区別されません。

 次のCSSコードは、HTMLドキュメント中のカナダのフランス語またはドイツ語の要素に引用符を設定します。

html:lang(fr-ca) { quotes: '« ' ' »' }
html:lang(de) { quotes: '»' '«' '\2039' '\203A' }

 スタイルを適用する要素の親要素の言語をマッチの条件とすることもできます。たとえば、英語のテキストの中にあるこのフランス語の "improviste"のように引用符を設定する場合などにこの書式を利用することができます。

 次の例では、Q要素の親要素の言語に基づいて、そのQ要素に引用符を設定します。

:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }
▼ Property
記事情報
datePublished2011-01-01
dateModified2018-06-22
authorアセンブラの魔女
headlinelang()疑似クラス・セレクタ(lang() pseudo-class selector)に関する記事です
keywordsCSS
keywordsCascading Style Sheets
keywordsセレクタ
keywordsselector
keywordslang()疑似クラス・セレクタ
keywordslang() pseudo-class selector
publisher name= wiredFish, logo.name= wiredFish, logo.url= https://books-nekoya.jp/Programming/chigu-hagu-title-01.png size= 208 pixel x 50 pixel
image.url url= https://books-nekoya.jp/Programming/chigu-hagu-title-01.png , size= 208 pixel x 50 pixel