The :lang() pseudo class selector in CSS matches elements based on the context of their given language attribute. Language in HTML, is determined by a combination of the lang="" attribute, the <meta> element, and by information from the protocol such as the HTTP Accept-Language request-header1 field. Acceptable language-code strings are specified in the HTML 4.0 specification.
:lang(language-code) {
// whatever styling
}:lang(X) matches if the element is in language X. Whether the match is based solely on the identifier X being either equal to, or a hyphen-separated substring of, the element’s language value, in the same way as if performed by the “|=“ operator. The matching of X against the element’s language value is performed case-insensitively for characters within the ASCII range. The identifier X does not have to be a valid language name. It’s important to note that the :lang selector can be used globaly or specifically on any given element. Feel free to use descendant selectors or the :lang(language-code) pseudo class alone.
Example
Using the lang attribute on our root element (i.e. <html>) we can replace quotes depending upon the language specified.
<html lang="en">
<body>
<p><q>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</q></p>
</body>
</html>q:before { content: open-quote; }
q:after { content: close-quote; }
:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }English (en)
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
French (fr)
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
German (de)
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
The language attribute cannot be applied to the following elements:
- applet
- base
- basefont
- br
- frame
- frameset
- iframe
- param
- script
Related Properties
Other Resources
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Yep | Yep | Yep | Yep | Yep | Yep | Yep |
:lang(X) is a recommendation of the CSS Level 2 Revision 1 spec and orignally recommended as a part of the CSS Level 2 spec.
1 HTTP header fields are components of the message header of requests and responses in the Hypertext Transfer Protocol (HTTP). They define the operating parameters of an HTTP transaction. The Accept-Language request-header field is similar to Accept, but restricts the set of natural languages that are preferred as a response to the request.
perfect! i was having a problem with using the DIR attribute. this came in handy.
As I wrote in my comments for the quotes topic, there are issues with tying quotes to the lang attribute, namely:
a) Quotes used in practice are often NOT what the ‘official’ quotes are (just look at most online versions of print newspapers in Western Europe, where most follow a US variant).
b) Chrome applies the ‘official’ quotes associated with the lang element, but not for the body element.
c) Chrome applies the quotes to a q element with a lang attribute itself, rather than than to only its embedded q elements.
A couple of sites to check for online usage:
http://libguides.mit.edu/content.php?pid=146063&sid=1241695
http://www.enewsreference.com/country_news.shtml
Actually, defining my quotes in css properly made them independent of the lang attribute, though it does mean that one of the classes MUST be used on EVERY element where a lang attribute is used.
My styles (use as you wish) are:
/QUOTES/
body{quotes:'\201C' '\201D' '\2018' '\2019';}/“”‘’DEFAULT/
.Q_SuiDui * {quotes:'\2018' '\2019' '\201C' '\201D';}/‘’“”/
.Q_DuiSui * {quotes:'\201C' '\201D' '\2018' '\2019';}/“”‘’/
.Q_DS * {quotes:'\22' '\22' '\27' '\27';}/""''/
.Q_DsS * {quotes:'\301D' '\301E' '\27' '\27';}/〝〞''/
.Q_GdoGso * {quotes:'\AB' '\BB' '\2039' '\203A';}/«»‹›/
.Q_GdoDui * {quotes:'\AB' '\BB' '\201C' '\201D';}/«»“”/
.Q_GdoDol * {quotes:'\AB' '\BB' '\201E' '\201D';}/«»„”/
.Q_NK * {quotes:'\300A' '\300B' '\3008' '\3009';}/《》〈〉/
.Q_CJK * {quotes:'\300C' '\300D' '\300E' '\300F';}/「」『』/
.Q_DooSoo * {quotes:'\201E' '\201C' '\201A' '\2018';}/„“‚‘/
.Q_DolSui * {quotes:'\201E' '\201D' '\2018' '\2019';}/„”‘’/
.Q_DolSul * {quotes:'\201E' '\201D' '\2019' '\2019';}/„”’’/
.Q_DolGdo * {quotes:'\201E' '\201D' '\AB' '\BB';}/„”«»/
.Q_DolSuo * {quotes:'\201E' '\201D' '\2019' '\2018';}/„”’‘/
.Q_DolGdi * {quotes:'\201E' '\201D' '\BB' '\AB';}/„”»«/
.Q_GdiGsi * {quotes:'\BB' '\AB' '\203A' '\2039';}/»«›‹/
.Q_DulSul * {quotes:'\201D' '\201D' '\2019' '\2019';}/””’’/
.Q_Ja * {quotes:'\3010' '\3011' '\3016' '\3017';}/【】〖〗/
There is method in my class names. For example, DolGdo = Double opposite left Guillemot double outwards.
Hi! I recently created a website of the company, now I want to promote it. I managed to find some companies that can efficiently and cheaply to do this. For example, Site , or it is possible to employ the webmaster. Maybe someone heard about this company or can give advice?