: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

HTML

<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>

CSS

:lang(en) > q { 

   quotes: '\201C' '\201D' '\2018' '\2019'; 

}

:lang(fr) > q { 

   quotes: '« ' ' »'; 

}

:lang(de) > q { 

   quotes: '»' '«' '\2039' '\203A'; 

   }

Result

Browser Support

Desktop

8	12	1	1	8	3.1

Tablets / Mobile

1	18	4	10.1	2	1.0

Last updated by CSSPortal on: 25th November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu