:lang() Selector

Selects all elements of the specified language.

.lang(language)

language StringA 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

Looking for a Web Developer?

👋

Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at jobs@jqapi.com :)