CSS :lang() Pseudo-Class

CSS :lang() Pseudo-Class

The CSS :lang() pseudo-class selects elements based on their content language. It allows developers to apply language-specific styles to text, quotations, and other content in multilingual HTML documents.

:lang() Syntax

selector:lang(language-code) {
  property: value;
}

The :lang() pseudo-class accepts one or more language ranges inside parentheses. An element matches when its content language matches one of the specified ranges.

Basic Example

p:lang(fr) {
  color: #006699;
}

This rule selects paragraphs whose content language is French.

English Language Example

:lang(en) {
  font-family: Arial, sans-serif;
}

This rule selects elements whose content language matches English, including regional variants such as en-US and en-GB.

Multiple Language Codes

:lang(fr, de) {
  font-style: italic;
}

This rule selects elements whose content language matches either French or German.

Quoted Language Codes

:lang("en-US") {
  color: #006699;
}

Language ranges can be written as valid CSS identifiers or quoted strings. Quotes are useful for ranges containing wildcard characters.

How :lang() Works

The browser determines the content language of an element using information provided by the document. In HTML, the lang attribute is the usual way to declare a language.

HTML Example

<p lang="en">This paragraph is in English.</p>
<p lang="fr">Ce paragraphe est en français.</p>

CSS Example

p:lang(en) {
  color: #006699;
}
p:lang(fr) {
  color: #008000;
}

The English paragraph appears blue, while the French paragraph appears green.

Matching the Content Language

The :lang() pseudo-class matches the language determined for the element. It does not examine the text to detect which language is being spoken or written.

Language Information

In HTML, language information can come from the lang attribute, inherited language declarations, or other document-level language information.

Automatic Styling

Once the browser determines the content language, matching CSS rules apply automatically. JavaScript is not required.

Language Codes

Language codes identify the language of an element's content. HTML uses language tags based on the BCP 47 standard.

Common Language Codes

Regional Language Variants

<p lang="en-US">Color</p>
<p lang="en-GB">Colour</p>

Both paragraphs use English, but their language tags identify different regional variants.

Matching a General Language

:lang(en) {
  font-family: Arial, sans-serif;
}

This rule matches English-language content, including the en-US and en-GB variants.

Case-Insensitive Matching

Language-range matching is case-insensitive. For example, :lang(EN) and :lang(en) represent the same language range.

Inherited Languages

In HTML, elements normally inherit their content language from the nearest ancestor that declares one.

HTML Example

<div lang="fr">
  <h2>Bienvenue</h2>
  <p>Ce texte est en français.</p>
</div>

CSS Example

p:lang(fr) {
  color: #008000;
}

The paragraph matches :lang(fr) even though it does not have its own lang attribute. Its content language is inherited from the surrounding <div>.

Overriding an Inherited Language

<div lang="en">
  <p>This paragraph is in English.</p>
  <p lang="es">Este párrafo está en español.</p>
</div>

The first paragraph inherits English. The second paragraph declares Spanish and therefore matches :lang(es) instead.

Language Inheritance vs. CSS Inheritance

Language inheritance determines an element's content language. CSS property inheritance determines how certain computed style values pass from parents to children. These are separate mechanisms.

Multiple Languages

The :lang() pseudo-class can match more than one language using a comma-separated list.

CSS Example

:lang(fr, es, it) {
  font-style: italic;
}

This rule selects French, Spanish, and Italian content.

HTML Example

<p lang="fr">Bonjour</p>
<p lang="es">Hola</p>
<p lang="it">Ciao</p>
<p lang="en">Hello</p>

The first three paragraphs match the selector. The English paragraph does not.

Alternative Selector Syntax

:lang(fr), :lang(es), :lang(it) {
  font-style: italic;
}

This traditional selector list produces the same matching result for these languages.

Browser Compatibility

Support for multiple language ranges inside one :lang() expression was added in Selectors Level 4. A traditional selector list can be used when compatibility with older implementations is necessary.

Language Ranges and Wildcards

Language ranges allow :lang() to match general languages, regional variants, and selected groups of language tags.

Implicit Language Matching

:lang(en) {
  color: #006699;
}

This rule matches en, en-US, en-GB, and other English-language variants.

Specific Regional Language

:lang(en-GB) {
  color: #008000;
}

This rule matches the British English language range rather than all English-language content.

Wildcard Language Range

:lang("*-CH") {
  font-style: italic;
}

The wildcard range matches language tags with a CH region subtag, including examples such as de-CH, fr-CH, and it-CH.

Wildcard Syntax

A wildcard must represent a complete language subtag. Use a quoted string when the language range contains an asterisk.

Invalid Wildcard Example

:lang("*-F*") {
  color: red;
}

This is not a valid language range because the wildcard is used as part of a subtag instead of replacing an entire subtag.

:lang() vs. [lang]

The :lang() pseudo-class and the [lang] attribute selector can both be used with language information, but they work differently.

Comparison

HTML Example

<div lang="fr">
  <p>Ce paragraphe est en français.</p>
</div>

Using :lang()

p:lang(fr) {
  color: #008000;
}

The paragraph matches because its content language is French.

Using an Attribute Selector

p[lang|="fr"] {
  color: #008000;
}

The paragraph does not match this selector because it has no lang attribute of its own.

Choosing Between Them

Use :lang() when styling content based on its determined language. Use an attribute selector when matching the actual attribute value on an element is necessary.

Language-Specific Quotation Marks

Different languages use different quotation mark conventions. The :lang() pseudo-class can be combined with the CSS quotes property to provide appropriate quotation marks.

HTML Example

<p lang="en"><q>Hello</q></p>
<p lang="fr"><q>Bonjour</q></p>
<p lang="de"><q>Guten Tag</q></p>

CSS Example

q:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
q:lang(fr) {
  quotes: "\00AB\00A0" "\00A0\00BB";
}
q:lang(de) {
  quotes: "\201E" "\201C" "\201A" "\2018";
}

Each rule defines quotation marks for a particular language. The <q> element uses the appropriate pair when displaying its content.

The quotes Property

The quotes property controls quotation marks generated for <q> elements and CSS quotation content.

Regional Differences

Quotation conventions can vary by region and publishing style. Choose quotation marks appropriate for the content rather than assuming one convention applies to every speaker of a language.

:lang() Specificity

The :lang() pseudo-class contributes a specificity of 0-1-0, regardless of the number of language ranges inside its parentheses.

Specificity Examples

Specificity Example

p {
  color: #333;
}
p:lang(fr) {
  color: #006699;
}

When both selectors match and other cascade factors are equal, the language-specific rule takes precedence because it has greater specificity.

Language Codes Do Not Add Specificity

Adding more language codes inside :lang() does not increase the selector's specificity.

Practical Uses

The :lang() pseudo-class is useful when a website contains content in multiple languages.

Multilingual Websites

Apply different styles to content based on its declared language.

Language-Specific Fonts

:lang(ja) {
  font-family: "Noto Sans JP", sans-serif;
}

Choose an appropriate font stack for Japanese-language content.

Quotation Formatting

Use language-specific quotation marks for quoted text.

Regional Typography

Apply typography adjustments for particular language or regional conventions.

Mixed-Language Content

Style a foreign-language phrase inside a document without changing the surrounding text.

Language-Based Layout Adjustments

Adjust spacing or typography when text in different languages requires different presentation.

Limitations

The :lang() pseudo-class relies on language information supplied by the document.

Does Not Detect Language Automatically

The selector does not analyze text to identify its language. Incorrect language declarations can produce incorrect matching.

Language Must Be Determined

If the browser cannot determine an element's content language, language-specific selectors may not match as expected.

Not a Translation Feature

The :lang() pseudo-class changes styling only. It does not translate content.

Not a Text Direction Selector

The selector identifies content language, not whether text flows from left to right or right to left. Use :dir() for direction-based matching.

Advanced Syntax Compatibility

Multiple language ranges and wildcard matching are newer features than basic single-language matching. Check compatibility when supporting older browsers.

Accessibility

Correct language declarations help browsers and assistive technologies interpret multilingual content.

Declare the Document Language

<html lang="en">

Specify the primary language of the document using the lang attribute.

Identify Language Changes

<p>The French greeting is <span lang="fr">bonjour</span>.</p>

Identify meaningful language changes within the document so assistive technologies can interpret the content appropriately.

Screen Reader Pronunciation

Correct language information can help screen readers select appropriate pronunciation rules and voices.

Readable Typography

Choose fonts that support the characters and writing systems used in the content.

Text Direction

For right-to-left languages, declare the appropriate text direction separately using the HTML dir attribute when needed.

Do Not Use Color Alone

Language-specific colors can be decorative, but they should not be the only way important information is communicated.

Best Practices

• Use :lang() to style elements based on their content language.
• Declare the document's primary language using lang on the <html> element.
• Identify meaningful language changes within multilingual content.
• Use valid BCP 47 language tags.
• Remember that elements can inherit their content language from ancestors.
• Use :lang() instead of attribute selectors when inherited language matching is required.
• Use language-specific fonts and quotation marks when appropriate.
• Use :dir() for text direction rather than relying on language alone.
• Check compatibility before using advanced language-range syntax.

:lang() Example

This example displays paragraphs in English, French, German, and Spanish. The :lang() pseudo-class applies a different border and background color to each language. The French paragraph inherits its language from its parent element.

HTML

<div class="lang-demo">
  <p lang="en">Hello! (English)</p>
  <div lang="fr">
    <p>Bonjour! (French)</p>
  </div>
  <p lang="de">Guten Tag! (German)</p>
  <p lang="es">¡Hola! (Spanish)</p>
</div>

CSS

.lang-demo p {
  padding: 10px;
  margin-bottom: 10px;
  border-left: 4px solid #ccc;
}
.lang-demo p:lang(en) {
  border-color: #006699;
  background-color: #eaf6fc;
}
.lang-demo p:lang(fr) {
  border-color: #008000;
  background-color: #e8f5e9;
}
.lang-demo p:lang(de) {
  border-color: #cc6600;
  background-color: #fff3e0;
}
.lang-demo p:lang(es) {
  border-color: #993399;
  background-color: #f3e5f5;
}

Browser Result

Play in Editor

Note: The French paragraph matches :lang(fr) even though its lang attribute is declared on the surrounding <div>. The example demonstrates that language matching includes inherited content language.

Browser Support

Baseline: Widely available. Basic :lang() matching is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers. Support for multiple language ranges and wildcard syntax was introduced later and may differ in older browser versions.

For current compatibility information, visit Can I Use? .

Specifications

The :lang() pseudo-class is defined in CSS Selectors Level 4. It matches elements based on their determined content language using language ranges.

Selectors Level 4 - :lang()

HTML Living Standard - The lang Attribute