:lang CSS Pseudo Class

Description

The :lang pseudo-class defines the language used in the document or its fragment. Using the :lang pseudo-class, you can specify certain settings specific to different languages, for example, the appearance of quotation marks in quotes.

Syntax

element:lang(<language>) { ... } 

Values

  • <language>represents the language you want to target, such as: en - English; ru - Russian; de - German fr - French; it - Italian etc

Example

<p lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></p>
<p lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></p>
<p lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></p>
:lang(en) > q { 
quotes: '\201C' '\201D' '\2018' '\2019';
}
:lang(fr) > q {
quotes: '« ' ' »';
}
:lang(de) > q {
quotes: '»' '«' '\2039' '\203A';
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
8121183.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
118410.13.1X