The :lang() pseudo-class in CSS is used to select elements based on their language attribute, typically defined in the HTML using the lang attribute. This allows developers to apply specific styles to content written in different languages, which is especially useful for multilingual websites or documents that require typographic or stylistic adjustments depending on the language of the text. By using :lang(), you can tailor the appearance of text without manually adding extra classes or identifiers, making your CSS more semantic and maintainable.

The :lang() pseudo-class matches the language of an element and its descendants. It accepts a language code as its argument, following the standard BCP 47 format, such as en for English, fr for French, or es-ES for Spanish as used in Spain. If an element has a language attribute that starts with the specified code, the selector applies. For instance, <p lang="en-US">Hello</p> will match :lang(en), because "en-US" starts with "en".

A common use case is adjusting typography or punctuation rules for different languages. For example, certain languages may require larger line spacing or specific quotation marks. You can combine :lang() with other selectors and CSS properties, such as font-family or quotes, to ensure readability and proper formatting.

Here is a simple example demonstrating its usage:

<p lang="en">Hello, world!</p>
<p lang="fr">Bonjour le monde!</p>

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

p:lang(fr) {
  font-family: "Times New Roman", serif;
  color: red;
}

In this example, English paragraphs will appear in blue Arial, while French paragraphs will appear in red Times New Roman.

The :lang() pseudo-class is also particularly useful in combination with internationalization of websites, allowing developers to provide language-specific styles without additional markup. Moreover, it can help with accessibility, as screen readers and other assistive technologies can benefit from semantically correct language tagging.

A practical tip is that :lang() can match any descendant elements if they inherit the language from their parent, which reduces the need to set the lang attribute on every single element individually. This makes your CSS cleaner and your HTML simpler.