:lang()
:lang() is a CSS pseudo-class selector that matches an element based on the language it is determined to be in.
A language is determined in HTML using a combination of the lang attribute (e.g <html lang="en">), the <meta> tag, and possibly by information from the protocol (such as HTTP headers). XML uses an attribute called xml:lang, and there may be other document language-specific methods for determining the language.
For example, the following applies styles to an element if it is determined to be in the language X:
.element:lang(X) {
/* style rules here */
}
The pseudo-class :lang() represents an element that is in language . Whether an element is represented by a :lang() selector is based solely on the element’s language value being equal to the identifier X, or beginning with the identifier X immediately followed by “-” (U+002D). The matching of X against the element’s language value is performed case-insensitively within the ASCII range.
The :lang() selector can also be used “globally” to set the styles for any elements that are determined to be in the language specified by the selector. For example:
:lang(fr) {
/* styles for elements determined to be in French */
}
The two following selectors represent an HTML document that is in Belgian French or German. The two next selectors represent q quotations in an arbitrary element in Belgian French or German.
html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > q
See the examples section below for a more practical example.
Trivia & Notes
Declaring Language in HTML
A language is usually specified on the root html element and is therefore inherited by the information in the head and the body, but it can also be specified on any element in the page. For example:
In this case, the span could be styled as so:
span:lang(zh-Hans) {
/* styles here */
}
To be sure that all user agents recognize which language you mean, you need to follow a standard approach when providing language attribute values. You also need to consider how to refer in a standard way to dialectal differences between languages, such as the difference between US English and British English, which diverge significantly in terms of spelling and pronunciation.
Language codes consist of a primary code and a possibly empty series of subcodes: language-code = primary-code ( "-" subcode )*. Example language codes include “en” for English, “zh-Hans” for Chinese, and en-GB-oed for English based on the Oxford English Dictionary spelling.
In order to choose the right language code, you can check the list of available language codes out in the IANA language sub-tag registry, and read more about declaring languages in HTML in this excellent post on W3C. The post also contains a list of excellent resources for learning more about languages in HTML.
More HTML language resources:
- Language Information and Text Direction – W3C
- Declaring Language in HTML – W3C (includes many other resources)
- Language Tags in HTML – AccessAbility
- IANA Language Sub-tag Registry
Examples
Using the :lang() selector, we can change the type of quotation marks used for quotes (and possibly other elements) in a page. English, French, and German quotation marks are usually different, so it is good to apply the suitable quotation marks depending on the language being used. The following example does exactly that.
We’re going to specify the language of the document on the root html element, and add in some content into the page.
<html lang="en">
<head><!-- head content --></head>
<body>
<q>This is a quote quoting Steve Jobs saying <q>Design is not just what it looks like and feels like. Design is how it works.</q> for inspiration. </q>
</body>
</html>
Using the quotes property, we’re going to add different quotation marks depending on the language of the document.
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
/* English quotes */
:lang(en) q {
quotes: "\201C" "\201D" "\2018" "\2019"; /* Unicode values are used to specify special quote characters. */
}
/* French quotes */
:lang(fr) q {
quotes: "«" "»" "‹" "›";
}
/* German quotes */
:lang(de) q {
quotes: "»" "«" "‹" "›";
}
When the value of the lang attribute changes, the appropriate quotation marks will be used.
Live Demo
The following demo is similar to the above example, except that the language attribute is applied to each individual quote for the sake of demonstration, so you can see all three results. You can remove the individual lang attributes and then switch the attribute value on the html element to see the result change accordingly.
Browser Support
THe :lang() pseudo-class selectors is supported in Chrome, Firefox, Safari, Opera, Internet Explorer 8+, and on Android and iOS.