The :lang() pseudo-class matches an element according to its determined content language, including a language inherited from an ancestor. It is not merely an attribute selector for elements carrying their own lang attribute. CSS styling cannot declare the language for assistive technology; the document must do that.
Make this comfortable
CSS :lang(): style text from its declared language
When to use it
A multilingual incident note contains a French quotation inside an English report. The HTML marks the quotation's language, and the style gives that text appropriate quote marks and automatic hyphenation where a dictionary is available. A nested title or emphasized phrase can match through inherited language. Check the real quote markup, not a decorative pair of pseudo-element characters, because nested quotations and copy behavior matter. Test French regional variants, words without a hyphenation dictionary, an untagged quotation, and a translated page where the outer document language changes. The reading order and words must remain correct without CSS. Do not apply a site-wide script font merely because one region has a different language; Unicode coverage and fallback still need inspection. CSS can improve presentation once the document identifies the language, but it cannot repair a wrong lang value or tell a speech engine how to pronounce an unmarked phrase.
.incident-quote:lang(fr) { hyphens: auto; }
.incident-quote q:lang(fr) { quotes: "« " " »" "‹ " " ›"; }
.incident-quote:lang(en) { hyphens: manual; }Cost and verification
The selector cost is small; the larger risk is editorial language metadata and browser dictionary availability. Automatic hyphenation can produce different line breaks across systems and may need an explicit minimum measure or manual review for headings. Quote glyphs are presentational, so verify how the browser handles nested q elements and copied text. A CSS rule cannot translate text. Preserve a readable fallback when :lang() or a language-specific hyphenation dictionary is unavailable. Do not rely on a language selector to choose an external font subset without testing the actual glyph mix in translated names and citations.
Common Mistakes
- Do not use :lang() in place of an HTML lang declaration.
- Do not assume every browser has a hyphenation dictionary for the selected language.
- Do not type duplicate decorative quote characters into the source text.
Connected lessons
- CSS Property Decisions
- CSS hyphens: wrap prose with a declared language
- CSS writing-mode: test layout axes rather than rotating text
- CSS unicode-range: request only the font subset a page uses
- HTML lang, dir, and bdi: keep text pronunciation and direction stable
Further rendering decisions
css
reference
web