:Lang Pseudo-class trong CSS

Bộ chọn lớp giả CSS:lang () được sử dụng để chọn các phần tử có thuộc tính lang được chỉ định. Điều này giúp chúng tôi nhắm mục tiêu một ngôn ngữ cụ thể được liên kết với nội dung và tạo kiểu cho chúng phù hợp.

Cú pháp

Sau đây là cú pháp -

:lang(){
   /*declarations*/
}

Hãy xem một ví dụ cho CSS:lang () pseudo-class selector -

Ví dụ

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

Đầu ra

:Lang Pseudo-class trong CSS

Hãy xem một ví dụ khác về CSS:lang () pseudo-class selector -

Ví dụ

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

Đầu ra

:Lang Pseudo-class trong CSS