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.

  2. Patanjali
    Permalink to comment#

    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

    • Patanjali
      Permalink to comment#

      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.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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