多言語サイトなどで使うと便利な:lang擬似クラスを試してみます。
サンプルコード
<html>のlang属性を使ってスタイルを変更してみます。
CSS
.text {
color: red;
}
:lang(en) .text {
color: blue;
}
:lang(es) .text {
color: green;
}
HTML
<html>のlang属性をjaにしてみます。
<p class="text">lang="ja"</p>
赤色で表示されます。
jaのデモページ
HTML
<html>のlang属性をenにしてみます。
<p class="text">lang="en"</p>
青色で表示されます。
enのデモページ
HTML
<html>のlang属性をesにしてみます。
<p class="text">lang="es"</p>
緑色で表示されます。
esのデモページ
HTML
<html>のlang属性をen-USにしてみます。
<p class="text">lang="en-US"</p>
前方一致のため、enと同じく青色で表示されます。
en-USのデモページ
サンプルコード2
<body>内の要素に対してlang属性を指定してスタイルを変更してみます。
CSS
.text {
color: red;
}
.text:lang(en) {
color: blue;
}
.text:lang(es) {
color: green;
}
HTML
<p class="text">lang="ja"</p> <div lang="en"> <p class="text">lang="en"</p> </div> <div lang="es"> <p class="text">lang="es"</p> </div> <div lang="en-US"> <p class="text">lang="en-US"</p> </div>
祖先要素で指定されたlang属性を継承するため、各.textでスタイルが適用されます。
lang属性を指定した場合のデモページ
【参考サイト】
- 多言語Webサイトを制作する時に気をつけたいポイント | Webクリエイターボックス
- 言語擬似クラス (E:lang(fr))｜セレクタ｜CSS HappyLife ZERO
- HTML5 – :lang擬似クラスは便利 – Qiita
コメントが承認されるまで時間がかかります。