CSS lang selector explained

Ever wondered how to apply different fonts, colors, and other styles to match the language used on your webpage? That's where the CSS lang selector comes in. This pseudo-class allows you to customize the look and feel of your webpage based on the language that is used on it. So, stay with us and learn more about this CSS feature and how to employ it on your multilingual websites.

What is a CSS lang selector?

The CSS lang selector is a pseudo-class in CSS that allows you to select element(s) based on a unique condition, the language of the element. It consists of a colon (:), followed by the pseudo-class name (lang), and parentheses to outline the conditions.

The formal syntax of the CSS lang selector:

:lang(<language-code>) {
  /* ... */
}

When to use CSS lang selector?

If you're developing a website that needs to support multiple languages, the CSS lang selector can be incredibly helpful. This tool allows you to tailor your HTML element styles based on language. Imagine you want a certain font-family to be used only for a particular language - the CSS lang selector makes this possible. Similarly, it can also accommodate differences in the use of quotation marks across languages. Furthermore, it lets you adjust colors, letter spacing, layout styles, and other design aspects based on the language used on the page.

Example 1

Example 2

Example 3

Code

<!DOCTYPE html>
<html>
<head>
  <style>
    :lang(en) {
      color: green;
    }
    :lang(fr) {
      color: blue;
    }
  </style>
</head>
<body>
  <div lang="en">
    <p>Text in English</p>
  </div>
  <div lang="fr">
    <p>Texte en français</p>
  </div>
</body>
</html>

Output

Differences between the :lang pseudo-class and the lang attribute selectors in CSS

The :lang pseudo-class and the lang attribute selectors in CSS both deal with language-specific styling, but there are key differences in how they function.

The :lang pseudo-class selects elements based on the language that is determined from the lang attribute, meta element, and HTTP headers. It also respects inheritance, applying styles not only to elements explicitly marked with the lang attribute but also to their child elements.

On the other hand, the lang attribute selectors only style elements where the lang attribute has been explicitly defined, ignoring inheritance. In other words, it only affects those specific elements and not their children.

:lang pseudo-class

lang attribute

Code

<!DOCTYPE html>
<html>
<head>
  <style>
    p:lang(de) {
      color: green;
    }
  </style>
</head>
<body>
  <div lang="de">
    <div>
      <div>
        <p>Hallo 👋</p>
      </div>
    </div>
  </div>
</body>
</html>

Output

Browser support for the CSS lang selector

The CSS lang selector is widely supported across all major web browsers, including Chrome, Firefox, Safari, Opera, and newer versions of the Internet Explorer. It's also supported in Edge, Microsoft's browser that replaced Internet Explorer.

However, be aware that not all lang selector features are equally supported in all browsers. For instance, some browsers might not fully support the use of comma-separated list of language codes or matching language codes with wildcards.

Conclusion

In this blog post, we have explained how to utilize the CSS :lang selector to enhance the aesthetics of your website based on the language of the document. We provided some examples that highlight the use of the CSS :lang selector and the advantages of using the :lang pseudo-class selector over the lang attribute selector in CSS for multilingual websites.

Adjusting styles according to language is just a small part of software localization. The more challenging tasks involve adapting the website to support multiple languages and translating the site's content. Thankfully, the Localizely platform can assist you with these localization tasks and automate some repetitive work. It offers a free plan (no credit card required), making it ideal for smaller projects. Additionally, it is completely free for open-source projects. Check it out today and discover all the benefits it has to offer.

Like this article? Share it!

Aleksa Krstic

Aleksa is a Software Engineer at Localizely. Over the past few years, Aleksa has been working in the field of software localization. In his free time, he enjoys playing guitar and writing tech posts.

Enjoying the read?

Subscribe to the Localizely blog newsletter for quality product content in your inbox.

October 28, 2024

In “Localization”

Boost your localization with a dedicated JSON editor

October 25, 2024

In “Localization”

A practical guide for efficient translation of YAML files

October 23, 2024

In “Localization”

Navigating localization success with Localizely

Step into the world of easy localization

Try Localizely

Contents

CSS lang selector explained

What is a CSS lang selector?

When to use CSS lang selector?

Code

Output

Differences between the :lang pseudo-class and the lang attribute selectors in CSS

Code

Output

Browser support for the CSS lang selector

Conclusion

Enjoying the read?

About

Resources

Free tools

Boring stuff

Newsletter