More than 5 years have passed since last update.

意外と知らなかった便利な:lang疑似セレクタ

Posted at 2019-05-08

HTML5で言語を明示するのに、lang属性というものがあります。

<html lang="ja">

みたいなやつですね。
htmlタグ上で言語を明示するものとしか思っていなかったのですがhtmlタグ以外のタグにも使用することができます。

<p lang="ja"></p>
<p lang="en"></p>

またCSSには、lang属性をセレクタで指定する特別な疑似セレクタがあり、エレメント:lang(ja)のように書くことができます。

(タグ名):lang((言語名)){
  (スタイル記述)
}

.(クラス名):lang((言語名)){
  (スタイル記述)
}

言語を指定した要素から要素内の子孫要素までlang疑似セレクタが継承されるので、これを使えばルートのhtml要素にjaとかenとかでlangを設定して、lang疑似セクタだけで言語別のCSSスタイルを切り替えることができますね。
多言語化対応でCSSを切り替えなければならない場合に使えそうです！