This page is Not Ready

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

:lang(c)

Summary

The :lang© pseudo selector applies to documents that specifies the lang attribute to an HTML element. This allows to style based on which language (and/or dialect) a given section is written into.

If the document language specifies how the human language of an element is determined, it is possible to write selectors that represent an element based on its language. For example, in HTML [HTML401], the language is determined by a combination of the lang attribute and possibly information from the meta elements or the protocol (such as HTTP headers). XML uses an attribute called xml:lang, and there may be other document language-specific methods for determining the language.

The pseudo-class :lang(C) represents an element that is in language C. Whether an element is represented by a :lang() selector is based solely on the element’s language value (normalized to BCP 47 syntax if necessary) being equal to the identifier C, or beginning with the identifier C immediately followed by "-" (U+002D). The matching of C against the element’s language value is performed case-insensitively. The identifier C does not have to be a valid language name.

C must be a valid CSS identifier [CSS21] and must not be empty. (Otherwise, the selector is invalid.)

Note: It is [recommended] that documents and protocols indicate language using codes from BCP 47 [BCP47] or its successor, and by means of "xml:lang" attributes in the case of XML-based documents [XML10]. See "Two-letter or three-letter language codes."

The value of C should be a language code that is indicated by RFC3066: Tags for the Identification of Languages.

If C is empty or invalid, the selector will have no effect.

Syntax

 selector:lang(C) { /* ... */ }

Parameters

selector
A CSS simple selector
C
Language code as specified in RFC3066: Tags for the Identification of Languages

Examples

The following code example uses the :lang© pseudo-class to apply a color to any p elements that are explicitly given a language value of “en” (or a hyphen-separated subset thereof). The first paragraph gets “en-us” (a subset of “en”) and thus turns green.

<!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=8"/>
  <title>:lang pseudo-class</title>
  <style type="text/css">
  p:lang(en) {
    color: green;
  }
  </style>
  </head>
  <body>
  <div class=body>

    <h1>:lang(C) Sample</h1>

    <!-- This paragraph gets "en-us" (a subset of "en") and thus turns green. -->
    <p lang="en-us">This paragraph's language is set to "en-us", so it's green.</p>
    <!-- This paragraph has no language value and thus does not turn green. -->
    <p>This paragraph has no language attribute, so it doesn't turn green.</p>
    <!-- This paragraph is actually a div; therefore, even though its language value
        is "en-us", it does not turn green. -->
    <div lang="en-us">This div's language is set to "en-us", but this page's :lang
        pseudo-class only applies to paragraphs, so it doesn't turn green.</div>

  </div>
  </body>
  </html>

How to declare a full HTML document body language

<body>
    <p>This text is written in english, but <span lang=fr>cette section ci est écrite en français</span>.</p>
  </body>

The two following selectors represent an HTML document that is in Belgian French or German. The two next selectors represent q quotations in an arbitrary element in Belgian French or German.

html:lang(fr-be)
  html:lang(de)
  :lang(fr-be) > q
  :lang(de) > q

Match all of the listed language codes (and any corresponding hyphen-separated substrings of language codes) that are known to have text orientation from right to left (see the “rtl” value at the direction property).

html:lang(ar),
  html:lang(dv),
  html:lang(fa),
  html:lang(he),
  html:lang(ku-Arab),
  html:lang(pa-Arab),
  html:lang(prs),
  html:lang(ps),
  html:lang(sd-Arab),
  html:lang(syr),
  html:lang(ug),
  html:lang(ur),
  html:lang(qps-plocm) {
     direction: rtl;
  }

Related specifications

CSS 2.1
W3C Recommendation

See also

Related articles

Pseudo-Classes

Selectors

External resources

Attributions