https://idea-hack.com/blog/35670/
How to apply styles by CSS language

How to apply styles by CSS language

When operating a multilingual site, you may want to modify the CSS style depending on the language.
Mainly when the style applied to the Western language is used to the Japanese, the appearance is often not good.
So let’s learn CSS that specifies styles by language in this article.

Sample code

Let’s run the sample code first.

html
<div class="sample">
  <div lang="ja">
    <div class="message">lang=ja</div>
  </div>
  <div lang="ja_JP">
    <div class="message">lang=ja_JP</div>
  </div>
  <div lang="en">
    <div class="message">it is lang=en</div>
  </div>
  <div lang="en_US">
    <div class="message">it is lang=en_US</div>
  </div>
</div>
css
.sample .message {
  font-weight: bold;
}
.sample .message:lang(ja) {
  color: rgba(255, 144, 130, 0.7);
}
.sample .message:lang(ja_JP) {
  color: rgba(255, 130, 165, 0.7);
}
.sample .message:lang(en) {
  color: rgba(130, 215, 255, 0.7);
}
.sample .message:lang(en_US) {
  color: rgba(130, 255, 144, 0.7);
}
lang=ja
lang=ja_JP
it is lang=en
it is lang=en_US

Apply a style by specifying: lang ()

: lang () is a pseudo-class. It is not particularly new and is a feature that can be used from 2011.

It has the following features.

  • Assign a style for a specific language
  • Use a language code, such as ja or en
  • The lang attribute is reflected in all of its child elements.
  • In the sample code, the lang attribute is attached to
    tag, but usually, it is connected to tag.

:not()

In the sample code, I specified the language to which I want to apply the style. However, there are cases where you want to define “non-Japanese” or “non-English.”

In such cases, you can use a combination of negative pseudo-classes (: not ()).

css
.message: not (: lang (ja)), .message: not (: lang (ja_JP)) {
   ...
}

Summary

I showed you how to apply the style by specifying the language of the site.