:lang() Selector
Selects all elements of the specified language.
.lang(language)
language
| String | 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.
Color div elements according to their language.
JS
<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>
CSS
body {
background-color: #ccc;
}
h3 {
margin: 0.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;
}
HTML
$("div:lang(en-us)").addClass("usa");
$("div:lang(es-es)").addClass("spain");
DEMO