:lang() selector

Selects all elements of the specified language.

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.

jQuery( ":lang(language)" )
version added: 1.9
Examples:

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-1.10.2.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>
doc_jQuery
2016-03-27 13:48:41
Comments
Leave a Comment

Please login to continue.