CSS - Pseudo-class :lang()

Quiz

The CSS pseudo-class :lang() matches the elements as per the language that is passed in the function as an argument.

Possible Values

<language-code>

A list of one or more <string>s separated by commas, that target an element with language values.
The value should be according to BCP47 language codes.
the matching language range is case-sensitive.

Implicit wildcard matching is allowed, such that :lang(de-DE) will match de-DE, de-DE-1996, de-Latn-DE, de-Latf-DE and de-Latn-DE-1996.

Using wildcards explicitly, will require to include a full match of language subtag.

Syntax

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

CSS :lang() Example

Here is an example of :lang() pseudo-class:

<html>
<head>
<style>
   :lang(en) > q {
      quotes: '""';
   }
   :lang(fr) > q {
      quotes: ' ' ' ';
      color: white;
      background-color: steelblue;
   }
   div {
      padding: 10px;
   }
</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>

Print Page