Grow your CSS skills. Land your dream job.

:lang()

Last updated on:

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.

Comments

  1. Permalink to comment#

    perfect! i was having a problem with using the DIR attribute. this came in handy.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".