:lang擬似クラスは便利 #CSS

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擬似クラスみたいに勝手に継承してくれる属性（時には困るかもしれないけど…）等があったら教えて下さい。