公開日: 2025-06-20
タグ: CSS
著者: ダーシノ

:lang()で言語によってスタイルを変える

:lang()擬似クラスを使うことで、要素に適用されている言語（<p lang="ja">など）に基づいてスタイルを変更できる。

複数の言語を扱うウェブサイトで、言語ごとにテキストに関するスタイル（text-spacing-trimやtext-autospaceなど）を変更したり、言語切替に対応しているウェブサービスのUIを調整したりできる。

<html lang="ja">
  <body>
    <p>吾輩は<span lang="en">Cat</span>である。<span lang="fr">nom</span>まだない。</p>
    <p lang="en">I am a <span lang="fr">Chat</span> As yet I have no <span lang="ja">名前</span>.</p>
  </body>
</html>

*:lang(ja) {
  color: red;
}
*:lang(en) {
  color: blue;
}
*:lang(fr) {
  color: green;
}

デモ

吾輩はCatである。nomまだない。

I am a Chat As yet I have no 名前.