CSS :lang Selector
Last Updated : 29 Aug, 2024
Improve
The :lang Selector is used to target the element which is based on language attributes for a specific value. This selector work with the help of language-code.
Syntax:
:lang(lang-code) {
//property
}
Language Codes:
- en: for English.
- hi: for Hindi.
- fr: for French.
- de: for German
- it: for Italian
- ca: for Canadian
Example-1:
<!DOCTYPE html>
<html>
<head>
<style>
h3:lang(en) {
background: limegreen;
}
</style>
</head>
<body>
<h3 lang="en">"en" is lang-code for english.</h3>
</body>
</html>
Output:
Example-2: Language code apply on root element.
<!DOCTYPE html>
<html>
<head>
<style>
h3:lang(en) {
background: limegreen;
}
</style>
</head>
<body lang="en">
<h3>"en" is lang-code for English.</h3>
<h3>"fr" is lang-code for French.<h3>
<h3>"de" is lang-code for German.<h3>
</body>
</html>
Output:
Supported Browsers:
- Google Chrome 1.0
- Edge 12.0
- Firefox 1.0
- Safari 3.1
- Opera 8.0
