The :lang() pseudo-class matches elements based on the language they are in.
In HTML, language usually comes from the lang attribute (or inheritance from <html lang=…>). Use it for multilingual styling, quote marks, and typography tweaks per language.
Not deprecated. Standard Selectors Level 4 functional pseudo-class. Core single-code matching is widely available since July 2015.
:lang(en, fr) and wildcard forms like :lang("*-Latn") are not widely supported yet (notably missing in Chrome/Edge). Prefer one language code per rule for production.
:lang( <language-code>) { /* styles */ }Pass a BCP 47 language tag such as en, fr, or en-US. Matching is case-insensitive.
| Pattern | Description | Try it |
|---|---|---|
:lang(fr) | Match French content (and related tags) | Try it |
:lang(en-US) | Match a regional English variant | Try it |
| Quotes | Set language-specific quotes for <q> | Try it |
Nested lang | A child can override the parent language | Try it |
| Separate rules | Style several languages without comma lists | Try it |
:lang(en) range | Primary tag matches regional variants | Try it |
:lang()Mark language in HTML first, then branch styles with :lang().
lang on <html> and on any section in another language.p:lang(fr) or :lang(de) > q.en) when all regional variants should share styles.Three paragraphs with different lang values. :lang() colors each language; the nested English word inside Polish keeps its own style.
Each snippet focuses on :lang(). Use Try It Yourself for a live editor.
Color paragraphs marked as French.
<style>
p:lang(fr) {
color: #1d4ed8;
font-weight: 700;
}
</style>
<p lang="en">Hello</p>
<p lang="fr">Bonjour</p>lang="fr" sets the paragraph’s language.:lang(fr). Only French content gets the rule.en paragraph stays default.lang inherits the parent’s language.Match a specific regional tag with :lang(en-US).
<style>
p:lang(en-US) {
outline: 2px solid #db2777;
outline-offset: 4px;
}
</style>
<p lang="en-US">US spelling: color</p>
<p lang="en-GB">UK spelling: colour</p>en-US is more specific than en.:lang(en-US) targets that regional English content.en-GB out. The UK paragraph does not get the outline.:lang(en) when every English variant should share one style.Change quotation marks for English and French <q> elements.
<style>
:lang(en) > q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
quotes: "« " " »";
}
</style>
<div lang="en"><q>Hello</q></div>
<div lang="fr"><q>Bonjour</q></div>lang on the parent sets the context.:lang(en) > q targets quotes in English.quotes. English uses curly marks; French uses guillemets.<q> element shows the configured pairs.Language matching is smarter than a plain attribute check — but mark lang correctly first.
Without a usable language (attribute or inheritance), :lang() has nothing reliable to match. Always set lang on <html>.
[lang|=…] only inspects the attribute string. :lang() uses the determined language and language-range rules.
:lang(en, fr) support is limited. Write :lang(en) and :lang(fr) as separate rules for Chrome and Edge.
A nested lang="en" inside French text matches :lang(en), not the parent’s French rule.
:lang() is a browser CSS pseudo-class. Node.js, Deno, and Bun do not evaluate it.
Chrome 1+, Edge 12+, Firefox 1+, Safari 3.1+, Opera 10+, Samsung Internet 4+, Internet Explorer 8+. Argument lists and wildcards have limited support.
Bottom line: *Core single-code matching is safe. Prefer separate rules instead of :lang(a, b) lists. It is not a server runtime API.
lang attribute (and inheritance).:lang(en) covers regional English variants.One line: mark language in HTML, then style each language with :lang().
Learn the :last-child pseudo-class for targeting the last child in a parent.
8 people found this page helpful