:lang() - CSS Selector

Description of the :lang() pseudo-class.

The pseudo-class :lang() targets elements that are in the language specified as a parameter. The element's language is determined either by the lang="..." attribute, an HTTP protocol metadata, or a browser algorithm.
That's what makes it different from a selector like [lang='fr'], because the latter only takes into account the lang attribute of the element itself.
Here's an example syntax with these two selectors. They target elements of the text class written in Italian.

In the syntax of lang('it'), the comparison is case-insensitive. Also, apostrophes or quotes can be omitted; most browsers accept this syntax.

The W3C specification states that multiple language codes can be listed by separating them with commas, but few browsers recognize this syntax variant.

Another syntax uses the asterisk character (*) as a wildcard. This allows, for example, to specify only the second part of the language code. Note: in this syntax, the code must be in quotes or apostrophes.

Another syntax uses the asterisk character (*) as a wildcard. This allows, for example, specifying only the second part of the language code. Note: in this syntax, the code must be in quotes or apostrophes, and the * character must replace an entire part of the ISO code.

Examples :
:lang('*-be') targets elements with lang="fr-be".
:lang('f*-fr') is incorrect.

Example of use of the pseudo-class :lang().

Basic syntax.

The three elements below have lang attributes with different values. The pseudo-class selector :lang() lets you select them based on that.

Selection of multiple languages.

The example below illustrates how the selector lang('it','en') works (or doesn't work): multiple language codes specified in a single pseudo-class :lang(). If it works correctly, the elements in English and Italian should be outlined with a red line.

An alternative syntax is also proposed and affects the text color: the elements in English and Italian are in blue. This second syntax, which involves repeating a full selector for each language, takes longer to write but is fully recognized by all browsers.

In case the lang attribute is missing.

In this third example, the element doesn't have a lang attribute in the HTML code. The decision is made based on the lang="fr" attribute of the root html tag.

The example also includes a rule with a selector by criterion [lang='fr']. We can see that this second selector doesn't work because the element in question doesn't have a lang attribute itself.

Using the wildcard character *.

Browsers are starting to recognize syntaxes with a wildcard character. Here’s an example that might not work on all browsers. In Switzerland, several languages are spoken depending on the canton (French, German, Italian, etc.), here’s how to select all these languages when they’re associated with Switzerland.
The second frame highlights in red the German language elements no matter the country.

Choose quotation marks according to the language.

Here’s another example where the quotation marks are chosen based on language usage:
    '“' and '”' for English.
    '«' and '»' for French.
    '»' and '«' for German.

Browser compatibility with :lang().

The pseudo-class selector :lang() is well recognized by all browsers, at least in its basic syntax. For multiple languages and wildcard characters, most major browsers now recognize these syntaxes (2026), but the table doesn’t show that.

1

:lang()
pseudo-class

2

Multiple languages
separated by commas

3

Joker
character

Estimated overall support.

96%

19%

19%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Firefox

Firefox pour Androïd

Edge

Chrome

KaiOS Browser

Androïd Brower

Chrome pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Historic of the :lang() pseudo-class.

• Cascading Style Sheets Level 2 - Revision 1 Specification

  This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.

  Regarding :lang() First presentation of the :lang() pseudo-class.
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• Selectors Level 3

  This document describes the selectors that already exist in CSS1 and CSS2, and further introduces new selectors for CSS3 and other languages that may need them.

  Regarding :lang() No modification concerning the :lang() pseudo-class.
  

  August 03, 1999

  Working Draft.

  

  November 13, 2001

  Candidate Recommendation.

  

  December 15, 2009

  Proposed for recommendation.

  

  September 29, 2011

  Recommendation .

• Selectors Level 4

  This specification module defines new selectors that can be used in CSS.

  Regarding :lang() No change concerning the :lang() pseudo-class.
  

  September 29, 2011

  Working Draft.

  

  

  

See also...

You can also check out the page on pseudo-classes or selectors below, which are also related to language or writing mode.

:dir()

:lang()

Pseudo-class targeting elements based on their language.