https://idea-hack.com/en/blog/107224/

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.

.wp-block-ug-code-block-1-305eef78-c07b-4744-8176-cc318aa411d7 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-305eef78-c07b-4744-8176-cc318aa411d7 pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-305eef78-c07b-4744-8176-cc318aa411d7 pre code { font-size: 14px !important; }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>
.wp-block-ug-code-block-1-3522d40c-66d9-4fa2-92c4-b06fc7a056da { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-3522d40c-66d9-4fa2-92c4-b06fc7a056da pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-3522d40c-66d9-4fa2-92c4-b06fc7a056da pre code { font-size: 14px !important; }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
.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); }

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.

.wp-block-ug-list-block-6-b87ea332-bfda-4f48-b34a-fe232d2e6768 ul, .wp-block-ug-list-block-6-b87ea332-bfda-4f48-b34a-fe232d2e6768 ol { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-list-block-6-b87ea332-bfda-4f48-b34a-fe232d2e6768 li { border-left: 35px solid #40739e !important; background-color: #f5f5f5 !important; color: #545454 !important; font-size: 16px !important; padding: 10px 20px !important; margin-bottom: 14px !important; }.wp-block-ug-list-block-6-b87ea332-bfda-4f48-b34a-fe232d2e6768 li::before { color: #ffffff; }
  • 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 ()).

.wp-block-ug-code-block-1-bd990f81-26d0-444c-86f8-eb389dd89f0b { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-bd990f81-26d0-444c-86f8-eb389dd89f0b pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-bd990f81-26d0-444c-86f8-eb389dd89f0b pre code { font-size: 14px !important; }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.