CSS :lang() Pseudo Class

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

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.

Version

CSS2

Syntax

:lang() {
css declarations;
}

Example

<!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>

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

Example

<!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>



Related articles