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

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:

1. 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>.
2. 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.
3. 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.
4. We have many ISO language lists, we can use all the language lists.