:lang

Article
10/10/2017

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

Syntax

:lang (C) { sRules }

Possible values

sRules

String that specifies one or more Cascading Style Sheets (CSS) attribute/value pairs.

String that designates the language code of the element to be matched.

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 Gg721781.xtlink_newWindow(en-us,Expression.40).png .

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

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>

Standards information

This pseudo-class is defined in CSS Selectors Level 3 Gg721781.xtlink_newWindow(en-us,Expression.40).png .

Applies to

a, address, b, big, blockquote, body, br, button, caption, cite, code, dd, dfn, div, dl, dt, em, hn, i, img, input type=file, input type=image, input type=password, input type=text, kbd, label, legend, li, listing, marquee, menu, ol, p, plaintext, pre, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul