CSS lang selector
In this article, we will see what is CSS lang pseudo-class selector.
Syntax of lang pseudo
Syntax:
selector:lang(ISO language code)
{
declaration list;
}
It helps us to select any HTML element targeted by the selector, if it has the lang attribute value set to the specified language code.
Search for the ISO language code list
Code | Language |
---|---|
ar | Arabic |
ar | Arabic |
en | English |
hi | Hindi |
it | Italian |
ja | Japanese |
fr | French |
Ex:
p lang(en)
{
border:2px dotted blue;
}
It selects any p element if its lang attribute value is set to en.
Example code
CSS:
p:lang(fr){
border: 2px dotted blue;
width: 25%;
}
p:lang(en){
border: 2px solid red;
width: 25%;
}
HTML:
<p lang="en">Paragraph Text </p>
<p lang="fr">Paragraph Text </p>
Output:
- In the above code, we have two paragraph tags. We use the “lang” attribute for both <p> tags and give the value as “en” for the first <p> tag and “fr” for the second <p>.
- I want to set a blue border for an element with the value “en” of the “lang” attribute and a red border for an element with value “fr” of the lang attribute.
- So, “p:lang(fr)” is selected using the “:lang()” pseudo-class selector and applies 2px blue border. Then “p:lang(en)” is selected using “:lang()” pseudo-class selector and apply 2px red border.
- We have many ISO language lists, we can use all the language lists.