CSS :lang() Selector

Beginner

⏱️ 6 min read

📚 Updated: Jul 2026

🎯 4 Examples

i18n

CSS :lang() pseudo-class tutorial for styling elements based on language attributes

Overview

What You’ll Learn

The :lang() pseudo-class applies styles based on the language of an element, set via the lang attribute or inherited from a parent.

lang attr

Language code.

:lang(en)

By language.

Multilingual

Mixed content.

Regional

en-US, en-GB.

Inheritance

From html lang.

Quotes

Locale glyphs.

Fundamentals

Introduction

The :lang() selector in CSS allows you to apply styles based on the language of an HTML element. This is particularly useful for multilingual websites where different languages need distinct typography or visual treatment.

It improves accessibility and enhances the user experience by adapting presentation to each language’s conventions.

Definition and Usage

Write :lang(language-code) with a BCP 47 language tag such as en, fr, or zh-Hans. The selector matches elements whose effective language equals or starts with that code.

💡

Beginner Tip

Set lang on the <html> element for the page default, then override on individual elements: <p lang="fr">. Child elements inherit the parent’s language unless they specify their own.

Foundation

📝 Syntax

The syntax for the :lang() pseudo-class is:

syntax.css

:lang(language-code) {
  /* CSS properties */
}

The function accepts language codes that correspond to the lang attribute in HTML. You can also list multiple codes: :lang(en, fr).

Basic Example

lang-basic.css

:lang(en) {
  color: #1d4ed8;
  font-family: system-ui, sans-serif;
}

:lang(fr) {
  color: #b91c1c;
  font-family: Georgia, serif;
}

:lang(es) {
  color: #15803d;
  font-family: "Segoe UI", sans-serif;
}

:lang(en) p:lang(fr) :lang(en-US) :lang(en, fr)

Common Language Codes

Code	Language	HTML example
`en`	English	`lang="en"`
`fr`	French	`lang="fr"`
`es`	Spanish	`lang="es"`
`de`	German	`lang="de"`
`en-US`	U.S. English	`lang="en-US"`

Syntax Rules

Language is determined by the element’s lang attribute or inherited from ancestors.
:lang(en) matches en, en-US, and en-GB.
:lang(en-US) matches only U.S. English, not generic en.
Combine with elements: h1:lang(fr), blockquote:lang(de).
Always set lang in HTML for accessibility — CSS relies on it.

Related Selectors

[lang] attribute selector — matches any element with a lang attribute
[lang="fr"] — exact attribute match (no inheritance)
:dir(rtl) — styles based on text direction (right-to-left)
::before / ::after — add language labels with generated content
font-family property — often paired with :lang() for script-appropriate fonts

Cheat Sheet

⚡ Quick Reference

Question	Answer
Selector type	Functional pseudo-class
Syntax	`:lang(code)`
Data source	`lang` attribute (with inheritance)
`:lang(en)` matches	en, en-US, en-GB, etc.
Common use	Multilingual typography and quotes
Browser support	All browsers

Context

When to Use :lang()

:lang() is ideal for internationalized content:

Multilingual blogs — Style paragraphs differently when lang="fr" or lang="es" is set.
Font selection — Use serif fonts for Latin scripts and system fonts for CJK languages.
Quotation marks — Apply language-appropriate quote glyphs with the quotes property.
Regional spelling hints — Highlight U.S. vs British English with :lang(en-US).
Language badges — Combine with ::before to show a small language label.

Preview

👀 Live Preview

Three paragraphs with different lang attributes styled by :lang():

This is an English paragraph.

Ceci est un paragraphe en français.

Este es un párrafo en español.

Hands-On

Examples Gallery

Practice :lang() with multilingual paragraphs, scoped selectors, regional variants, and quote styling.

📜 Core Patterns

Style content based on language codes.

Example 1 — Style English, French, and Spanish

Apply distinct color and font-family to paragraphs in three languages.

lang-multilingual.html

<style>
  :lang(en) { color: #1d4ed8; font-family: system-ui, sans-serif; }
  :lang(fr) { color: #b91c1c; font-family: Georgia, serif; }
  :lang(es) { color: #15803d; font-family: "Segoe UI", sans-serif; }
</style>

<p lang="en">This is an English paragraph.</p>
<p lang="fr">Ceci est un paragraphe en français.</p>
<p lang="es">Este es un párrafo en español.</p>

Try It Yourself

How It Works

Each paragraph’s lang attribute triggers the matching :lang() rule. English gets blue sans-serif, French gets red serif, Spanish gets green.

Example 2 — Target only French paragraphs

Scope the selector to p elements so headings are unaffected.

lang-scoped.css

p:lang(fr) {
  border-left: 4px solid #b91c1c;
  padding-left: 0.75rem;
  font-style: italic;
}

Try It Yourself

How It Works

p:lang(fr) only styles paragraph elements in French. The heading keeps default styling even if it were inside a French section.

📄 Regional & Quotes

Handle regional variants and typographic conventions.

Example 3 — U.S. English vs British English

Use regional language codes for locale-specific styling.

lang-regional.css

:lang(en-US) {
  color: #1d4ed8;
}

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

/* Matches both en-US and en-GB */
:lang(en) {
  font-family: system-ui, sans-serif;
}

Try It Yourself

How It Works

:lang(en) is broader and matches all English variants. :lang(en-US) and :lang(en-GB) target specific regional forms.

Example 4 — Language-specific quotation marks

Use the quotes property with :lang() for locale-appropriate glyphs.

lang-quotes.css

q:lang(en) {
  quotes: "\\201C" "\\201D";
}

q:lang(fr) {
  quotes: "\\00AB" "\\00BB";
}

q {
  font-style: italic;
}

Try It Yourself

How It Works

English <q> elements get curly double quotes; French ones get guillemets (« »), following each language’s typographic convention.

Tips

💬 Usage Tips

Set lang in HTML — Always declare language in markup; CSS cannot detect language on its own.
Page default — Put lang on <html> and override on mixed-language sections.
Combine selectors — Use h1:lang(fr) for targeted element + language rules.
Regional subtags — Use en-US and en-GB when locale-specific styling matters.
Quotes property — Pair with :lang() for culturally correct quotation marks.

Watch Out

⚠️ Common Pitfalls

Missing lang attribute — Without lang in HTML, :lang() cannot match correctly.
Confusing with [lang] — Attribute selector [lang="fr"] does not inherit; :lang(fr) does.
Overly broad codes — :lang(en) affects all English variants; use subtags when you need specificity.
Styling alone is not translation — Change fonts and colors, but content language is set in HTML.
Accessibility — Incorrect lang values harm screen reader pronunciation.

A11y

♿ Accessibility

Correct lang values — Screen readers use lang to pick the right voice and pronunciation.
Mark language changes — Set lang on inline foreign phrases, not just the page root.
WCAG requirement — Language of page and passages should be programmatically determinable.
Do not guess — Only style with :lang() when the HTML lang is accurate.
RTL languages — Pair with dir="rtl" and :dir(rtl) for Arabic, Hebrew, etc.

🧠 How `:lang()` Works

HTML sets language

The lang attribute on an element or ancestor defines the language.

HTML

Browser resolves language

Each element gets an effective language, inherited from parents if not set directly.

Resolve

:lang() matches

If the effective language matches the code in :lang(), styles apply.

Match

Localized presentation

Typography adapts to each language on the page.

Compatibility

🖥 Browser Compatibility

The :lang() pseudo-class is supported in all browsers, including very old versions.

✓ Baseline · Universal support

Language styling everywhere

:lang() has been supported since early CSS implementations in all major browsers.

99% Universal support

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions

Full support

Opera All versions

Full support

:lang() pseudo-class 99% supported

Bottom line: :lang() is one of the most widely supported CSS selectors for internationalization.

Wrap Up

🎉 Conclusion

The :lang() selector offers a flexible way to style elements based on language, making it an essential tool for multilingual websites.

Set accurate lang attributes in HTML, use :lang() for typography and quotes, and always consider accessibility for screen reader users.

View Examples Gallery Try multilingual example

Pro Tips

💡 Best Practices

✅ Do

Set lang on <html> and inline phrases
Use :lang() for fonts and quote conventions
Combine with element selectors for precision
Use regional codes when locale matters
Validate lang values against BCP 47

❌ Don’t

Omit lang attributes and rely on CSS alone
Confuse :lang() with [lang]
Set wrong lang values for styling convenience
Assume CSS detects language automatically
Forget RTL direction for right-to-left languages

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about `:lang()`

Use these points when styling by language.

Core concepts

🌐 01

By language

lang attribute.

Purpose

() 02

:lang(en)

Code in parens.

Syntax

↓ 03

Inherits

From ancestors.

Rule

en-US 04

Regional

Subtags work.

i18n

🌐 05

99% support

All browsers.

Compat

❓ Frequently Asked Questions

What does the CSS :lang() selector do?

The :lang() pseudo-class matches elements based on their language, as indicated by the lang attribute or inherited from a parent. You pass a language code like en, fr, or es inside the parentheses.

Where does the language come from?

From the element's own lang attribute, or inherited from an ancestor such as html lang="en". An element matches :lang(en) if its effective language is English.

What is the difference between :lang(en) and :lang(en-US)?

:lang(en) matches any English variant including en-US and en-GB. :lang(en-US) matches only U.S. English specifically.

Can I use :lang() with element selectors?

Yes. Combine them like p:lang(fr) or h1:lang(es) to target specific elements in a given language.

Is :lang() supported in all browsers?

Yes. :lang() is supported in all modern and legacy browsers. It is a long-standing CSS feature for internationalization.

Practice in the Live Editor

Open the HTML editor and experiment with :lang(), multilingual content, and language-specific typography.

HTML Editor →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

5 people found this page helpful

CSS :invalid Selector CSS :last-child Selector

CSS :lang() Selector

What You’ll Learn

lang attr

:lang(en)

Multilingual

Regional

Inheritance

Quotes

Introduction

Definition and Usage

📝 Syntax

Basic Example

Common Language Codes

Syntax Rules

Related Selectors

⚡ Quick Reference

When to Use :lang()

👀 Live Preview

Examples Gallery

📜 Core Patterns

Example 1 — Style English, French, and Spanish

How It Works

Example 2 — Target only French paragraphs

Article (heading unaffected)

How It Works

📄 Regional & Quotes

Example 3 — U.S. English vs British English

How It Works

Example 4 — Language-specific quotation marks

How It Works

💬 Usage Tips

⚠️ Common Pitfalls

♿ Accessibility

🧠 How :lang() Works

HTML sets language

Browser resolves language

:lang() matches

Localized presentation

🖥 Browser Compatibility

Language styling everywhere

🎉 Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five things to remember about :lang()

By language

:lang(en)

Inherits

Regional

99% support

❓ Frequently Asked Questions

🧩 Related CSS Topics

CSS :invalid Selector

CSS :last-child Selector

CSS font-family Property

CSS [attribute] Selector

Practice in the Live Editor

About the author

🧠 How `:lang()` Works

Five things to remember about `:lang()`