24
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

:lang擬似クラスは便利

HTML5で言語を明示するために、lang属性というものがあります。
CSSには、lang属性をセレクタで指定する特別な擬似クラスがあり、E:lang(ja)のように書けます。

これの便利なところは、祖先要素に指定されているlang属性を、子孫の要素が暗に継承しているところです。

sample1.html
<!DOCTYPE html>
<html lang="ja">
<head></head>
<body>
  <div class="elm-1" lang="en">
    <p>Thanks, world!</p>    
  </div>
  <div class="elm-2" lang="ja">
    <p>ありがとう世界!</p>    
  </div>
</body>
</html>
style.scss
  p {
    color: black;

    &:lang(ja) {
      color: red;
    }
  }

上記の例では、elm-2にlang属性による指定をした上で、
その子要素の擬似クラスとしてlang(ja)を選んでいます。
(これで、日本語の段落のみ赤文字になります。)
p自体にはlang属性の指定がありません。

langに限らずですが、以下のような代替記述も可能です。

style-2.scss
  p {
    color: black;

    [lang=en] & {
      color: red;
    }
  }

ただ、この場合はpそのものにlang="en"を指定してある場合はマッチしませんので注意が必要です。

上記のコードだったら、別に言語ごとにセレクタを別けて書いてもいいかもしれませんが、
今回作っていたサイトが、HTMLが各言語で別ソースで、ルートのhtml要素にjaとかenとかのlangを設定し、CSSも共通、という設計だったので、この書き方がかなり有用でした。

lang擬似クラスみたいに勝手に継承してくれる属性(時には困るかもしれないけど…)等があったら教えて下さい。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
24
Help us understand the problem. What are the problem?