LoginSignup
4

More than 3 years have passed since last update.

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

Posted at

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を切り替えなければならない場合に使えそうです!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4