What does the :lang() pseudo-class do?

Q: What does the :lang() pseudo-class do?

The `:lang()` pseudo-class in CSS allows you to target elements based on their language attribute (`lang`). This is useful for applying language-specific styling, such as font, text direction, or typographic rules. `:lang(language-code)` – Selects elements whose language matches the specified code, e.g., `:lang(en)` for English or `:lang(fr)` for French. Matches both the `lang` attribute on the element and inherited language from parent elements. Useful for internationalization, styling multilingual content differently. /* Style English text */ p:lang(en) { font-family: Arial, sans-serif; color: navy; } /* Style French text */ p:lang(fr) { font-family: 'Times New Roman', serif; color: darkred; } Hello, world! Bonjour le monde! In this example, the English paragraph uses Arial and navy text, while the French paragraph uses Times New Roman and dark red text, demonstrating language-specific styling with `:lang()`. Use `:lang()` for multilingual websites to enhance readability and cultural appropriateness. Combine with other pseudo-classes like `:first-letter` or `:first-line` for detailed typographic styling. Ensure correct `lang` attributes are set on elements to make this pseudo-class effective. Test across browsers as support is broad but always verify inherited language behavior.

Difficulty: 3/10

language targeting, CSS pseudo-classes, internationalization

Using the :lang() Pseudo-Class in CSS

The :lang() pseudo-class in CSS allows you to target elements based on their language attribute (lang). This is useful for applying language-specific styling, such as font, text direction, or typographic rules.

Key Points About :lang()

1
:lang(language-code) – Selects elements whose language matches the specified code, e.g., :lang(en) for English or :lang(fr) for French.
2
Matches both the lang attribute on the element and inherited language from parent elements.
3
Useful for internationalization, styling multilingual content differently.

Example: Styling Based on Language

In this example, the English paragraph uses Arial and navy text, while the French paragraph uses Times New Roman and dark red text, demonstrating language-specific styling with :lang().

Best Practices

1
Use :lang() for multilingual websites to enhance readability and cultural appropriateness.
2
Combine with other pseudo-classes like :first-letter or :first-line for detailed typographic styling.
3
Ensure correct lang attributes are set on elements to make this pseudo-class effective.
4

Scenario Questions

0-2 years experience

Follow-up Questions