:lang(C) pseudo-class

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

CSS 2.1, Section 5.11.4


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



A CSS simple selector


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

Standards information


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;


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" 
  <meta http-equiv="X-UA-Compatible" content="IE=8" />
  <title>:lang pseudo-class</title>
  <style type="text/css">
    p:lang(en) {
      color: green;
  <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.




© 2014 Microsoft