CSS :lang() Pseudo Class

The :lang() pseudo-class matches an element based on the language it is determined to be in.

Any language determined in HTML uses a combination of the lang attribute (e.g <html lang="it">), the <meta> tag, and by information from the protocol (e.g HTTP headers).

The lang attribute value is a two-letter language code, like lang="it" for Italian, or two language codes combined, like lang="fr-ca" for Canadian French.

Using the :lang() selector, the type of quotation marks can be used for quotes in a page.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Version

CSS Selectors

CSS Selectors Level 3

Syntax

:lang() {
  css declarations;
}

Example of the lang() selector with "fr" value for French:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:lang(fr) {
        background: #1c87c9;
        color: #eee;
      }
    </style>
  </head>
  <body>
    <p>I am from France.</p>
    <p lang="fr">Je m'appelle Ann</p>
  </body>
</html>

Try it Yourself »

In the following example, the :lang() pseudo-class is used to match the parents of quote elements using child combinators.

Example of the :lang() selector using child combinators.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      :lang(en) > q {
        quotes: '\201C' '\201D' '\2018' '\2019';
      }
      :lang(fr) > q {
        quotes: '« ' ' »';
      }
    </style>
  </head>
  <body>
    <h2>:lang() selector example</h2>
    <div lang="en">
      <q>Lorem ipsum is simply dummy text</q>
    </div>
    <div lang="fr">
      <q>Lorem ipsum is simply dummy text</q>
    </div>
  </body>
</html>