Skip to content
Related Articles

Related Articles

CSS | :lang Selector

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Aug, 2022
View Discussion
Improve Article
Save Article

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: 

HTML




<!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. 

HTML




<!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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!