lang selector
Description: Selects all elements of the specified language.
-
version added: 1.9jQuery( ":lang(language)" )
language: A language code.
The :lang() selector matches elements that have a language value equal to the supplied language code or that start with the supplied language code immediately followed by "-". For example, the selector $("div:lang(en)")will match <div lang="en"> and <div lang="en-us"> (and any of their descendant <div>s), but not <div lang="fr">
For HTML elements, the language value is determined by the lang attribute and possibly information from meta elements or HTTP headers.
Further discussion of this usage can be found in the W3C CSS specification.
Example:
Color div elements according to their language.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>lang demo</title>
<style>
body {
background-color: #ccc;
}
h3 {
margin: .25em 0;
}
div {
line-height: 1.5em
}
.usa {
background-color: #f00;
color: #fff;
}
.usa .usa {
background-color: #fff;
color: #000;
}
.usa .usa .usa {
background-color: #00f;
color: #fff;
}
.spain {
background-color: #f00;
color: #ff0;
}
.spain .spain {
background-color: #ff0;
color: #f00;
line-height: 3em;
}
.spain .spain .spain {
background-color: #f00;
color: #ff0;
line-height: 1.5em;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h3>USA</h3>
<div lang="en-us">red
<div>white
<div>and blue</div>
</div>
</div>
<h3>España</h3>
<div lang="es-es">rojo
<div>amarillo
<div>y rojo</div>
</div>
</div>
<script>
$( "div:lang(en-us)" ).addClass( "usa" );
$( "div:lang(es-es)" ).addClass( "spain" );
</script>
</body>
</html>