:lang | CSS Selectors & Pseudo-classes

Matches elements by language. Use to style different languages differently without adding classes.

Quick example

:lang(en) { font-family: "Arial", sans-serif; }
:lang(ar) { font-family: "Droid Arabic Naskh", sans-serif; }

Examples

Style different languages with different fonts

:lang(en) { font-family: "Arial", sans-serif; }
:lang(ar) { font-family: "Droid Arabic Naskh", sans-serif; }
:lang(ja) { font-family: "Noto Sans CJK JP"; }

Use different typefaces optimized for each language without adding classes to every element.

Adjust letter-spacing per language

:lang(en) { letter-spacing: 0; }
:lang(ja) { letter-spacing: 0.05em; }
:lang(th) { letter-spacing: 0.1em; }

Some languages need different spacing. Set language-specific spacing with :lang().

Combine with lang attribute

<p lang="ar">مرحبا</p>
<p lang="en">Hello</p>

p:lang(ar) { direction: rtl; }

The lang attribute on HTML elements controls which :lang() selector matches.

:lang Browser Support

Widely available Since 1998 98% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 1998.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → View spec → Learn more about Baseline →

Common pitfalls

:lang() relies on lang attribute

:lang() matches based on the lang attribute (or inherited lang). If your HTML doesn't have lang attributes set correctly, :lang() won't work. Always set lang="en" or appropriate language code on the root element.

Complex language matching

:lang(en) matches both "en", "en-US", "en-GB". This is usually helpful but can be confusing if you expected exact matches only.

Not the same as data attributes

Don't use data-lang attributes with attribute selectors as a substitute. Use the actual lang attribute so screen readers and browsers know the language.