Export (0) Print
Expand All
1 out of 2 rated this helpful - Rate this topic

:lang(C) pseudo-class

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

CSS 2.1, Section 5.11.4Internet Explorer 8


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.

This pseudo-class requires that Windows Internet Explorer be in IE8 Standards mode or higher. For more information, see Defining Document Compatibility.

In Internet Explorer 10, 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, which is the only way in which to achieve this functionality in versions of Windows Internet Explorer prior to Internet Explorer 10:

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. All rights reserved.