:lang pseudo-class
[This documentation is preliminary and is subject to change.]
In a document, selects the elements that are in a given language.
  |
Syntax
selector
:lang(C) {...}
Parameters
- selector
-
A CSS simple selector
- C
-
Language code
Standards information
- CSS 2.1, Section 5.11.4
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.
This pseudo-class requires that Windows Internet Explorer be in IE8 Standards mode rendering. For more information, see Defining Document Compatibility.
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 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>
Build date: 3/14/2012
