:lang CSS Pseudo Class
Description
The :lang pseudo-class in CSS is used to select elements based on the language specified in the HTML lang attribute. It allows you to apply styles to elements based on the language of the document, enabling web developers to create multilingual websites with different styles for different languages.
Here's an example of how you might use the :lang pseudo-class in CSS:
/* Styles for English text */
:lang(en) {
font-family: Arial, sans-serif;
color: #333;
}
/* Styles for French text */
:lang(fr) {
font-family: "Trebuchet MS", sans-serif;
color: #555;
}
In this example, the
:lang(en) selector targets elements with the lang attribute set to "en" (English) and applies specific styles to them, such as setting the font family to Arial and the text color to a dark shade of gray. Similarly, the :lang(fr) selector targets elements with the lang attribute set to "fr" (French) and applies different styles, like using the "Trebuchet MS" font family and a slightly lighter gray text color.By utilizing the
:lang pseudo-class, developers can enhance the user experience by adjusting the visual presentation of content based on the language in which it is written.
Syntax
:lang(<language-code> [,<language-code> ]*) /* ... */ }
Values
- <language>represents the language you want to target, such as: en - English; ru - Russian; de - German fr - French; it - Italian etc
Example
<p lang="en-US">
Music during road trips and long commutes aren’t a problem, but using headphones isn’t the best thing to do while
driving in your car.
</p>
<p lang="pl-PL">
Gdy widzimy znak z narysowaną czaszką i napisem <strong lang="en-US">DANGER</strong> to lepiej nie wchodzić do środka.
</p>*:lang(en-US) {
outline: 2px solid deeppink;
}Browser Support
The following table will show you the current browser support for the CSS :lang pseudo class.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 1 | 1 | 8 | 3.1 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 10.1 | 2 | 1 | 4.4 |
Last updated by CSSPortal on: 1st October 2023