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, theelement, 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
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.
Share
Tweet
Email
Leave a Reply