:lang(C) pseudo-class

In a document, selects the elements that are in a given language.

CSS 2.1, Section 5.11.4

Syntax

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

Parameters

selector

A CSS simple selector

C

Language code as specified in RFC3066: Tags for the Identification of Languages

Standards information

Remarks

The set rules are applied when the value of C matches (or is a hyphen-separated substring of) the element's language value. 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.

In a Windows Store app using JavaScript, the :lang(C) pseudo-class accepts a comma-separated list of language codes. However, because this behavior is based on an early draft of the World Wide Web Consortium (W3C)'s Selectors Level 4 specification, you must add the "-ms-" vendor prefix to the pseudo-class to enable this functionality. In effect, the pseudo-class becomes :-ms-lang(C). Following is an example of its usage:


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


In this example, the selector will match all of the listed language codes (and any corresponding hyphen-separated substrings of language codes). This example is equivalent to the following:


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;
}

Examples

The following code example uses the :lang(C) 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.

Click to view sample.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

 

 

Show:
© 2014 Microsoft