Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
The :lang Pseudo-class in CSS
The CSS :lang() pseudo-class selector is used to select the elements with lang attribute specified. This helps us target a specific language associated with the content and style them accordingly. We can set multiple languages using this selector.
A two-letter language code is to be set i.e., the following for Italian −
<p lang='it'>Bella ciao</p>
The following for English −
<p lang='en'>Nice hello</p>
The following for Spanish −
<p lang='es'>Bueno adios</p>
Syntax
The following is the syntax to implement the :lang pseudo class −
:lang(){
/*declarations*/
}
Set the lang attribute
The lang attribute is set with a two-letter language code −
<p lang='it'>Bella ciao</p> <p lang='en'>Nice hello</p> <p lang='es'>Bueno adios</p>
Style and set the ltalian language
The Italian language is set using the content attribute −
p:lang(it)::after {
padding: 20px;
content: '~ Italian';
font-style: italic;
}
Style and set the Spanish language
The Spanish language is set using the content attribute −
p:lang(es)::after {
padding: 8px;
content: '~ Spanish';
font-style: italic;
}
Style and set the English language
The Spanish language is set using the content attribute −
p:lang(en)::after {
padding: 20px;
content: '~ English';
font-style: italic;
}
Set the Italian, Spanish, and English language
Let?s see an example for the CSS :lang() pseudo-class selector
Example
<!DOCTYPE html>
<html>
<head>
<style>
p:lang(it)::after {
padding: 20px;
content: '~ Italian';
font-style: italic;
}
p:lang(es)::after {
padding: 8px;
content: '~ Spanish';
font-style: italic;
}
p:lang(en)::after {
padding: 20px;
content: '~ English';
font-style: italic;
}
</style>
</head>
<body>
<p lang='it'>Bella ciao</p>
<p lang='en'>Nice hello</p>
<p lang='es'>Bueno adios</p>
</body>
</html>
Set the Italian, Spanish, and Belgium language
Let?s see another example of CSS :lang() pseudo-class selector. The Belgium is added here using the content attribute −
div:lang(nl)::after {
padding: 20px;
content: '~ Belgium';
font-style: italic;
}
In this example, the linear gradient is used to style the text in different language −
div:lang(es){
background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
div:lang(it){
background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
div:lang(nl){
background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
div{
margin: 10px;
padding: 10px;
text-align: center;
border: 1px solid black;
}
div:lang(it)::after {
padding: 20px;
content: '~ Italy';
font-style: italic;
}
div:lang(es)::after {
padding: 8px;
content: '~ Spain';
font-style: italic;
}
div:lang(nl)::after {
padding: 20px;
content: '~ Belgium';
font-style: italic;
}
div:lang(es){
background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
div:lang(it){
background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
div:lang(nl){
background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
</style>
</head>
<body>
<div lang='it'>Rome</div>
<div lang='nl'>Brussels</div>
<div lang='es'>Madrid</div>
</body>
</html>
125 Views
