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