CSS :lang() Pseudo Class

CSS `:lang()` Pseudo-Class

The :lang() pseudo-class allows you to apply styles based on an element’s language attribute (lang). It’s useful for multilingual websites where different languages need different typography or styles.

1. Syntax

selector:lang(language-code) {
  /* Styles for elements with the specified language */
}

✅ Targets elements with a matching lang attribute.

2. Example – Styling Based on Language

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

p:lang(en) {
  color: blue;
}

p:lang(fr) {
  color: red;
  font-style: italic;
}

p:lang(es) {
  color: green;
  font-weight: bold;
}

✅ English (en) text turns blue.
✅ French (fr) text turns red and italic.
✅ Spanish (es) text turns green and bold.

3. Nested Language Selection

You can apply :lang() to nested elements.

<div lang="de">
  <p>Das ist ein deutscher Text.</p>
</div>

div:lang(de) {
  border-left: 5px solid black;
}

✅ The entire <div> gets a black left border if it has lang="de".

4. Using `:lang()` with `::before` and `::after`

You can add visual cues for different languages.

p:lang(jp)::before {
  content: "🇯🇵 ";
}

p:lang(fr)::before {
  content: "🇫🇷 ";
}

✅ Adds a Japanese or French flag emoji before text based on language.

5. Combining `:lang()` with Other Selectors

h1:lang(zh), h2:lang(zh) {
  font-family: "SimHei", sans-serif;
}

✅ Applies the SimHei font to all <h1> and <h2> elements with lang="zh".

6. Browser Support

✅ Fully supported in all modern browsers (Chrome, Edge, Firefox, Safari, Opera, etc.).

7. Best Practices

✔ Use :lang() for language-based styling (e.g., right-to-left text, font changes).
✔ Ensure the lang attribute is correctly set in your HTML.
✔ Combine with @font-face for language-specific typography.

Souy Soeng

CSS :lang() Pseudo Class