jQuery :lang() Selector

What Is :lang()?

:lang(language) (since jQuery 1.9) selects elements whose language matches the given code — equal to it, or starting with that code plus a hyphen (so :lang(en) matches en and en-US, but not english). Language usually comes from the lang attribute (and can inherit from ancestors).

$("div:lang(en)")          // lang="en", "en-US", "en-GB", …
$("div:lang(en-us)")       // en-us specifically (official demo)
$("p:lang(es)")            // Spanish paragraphs
$('[lang="en"]')           // exact attribute only — narrower!

// Inheritance: a child without lang= still matches
// if an ancestor sets the language

How to Use :lang()

Pass a language code, optionally prefix with a tag, then style or count matches.

1. Write $(":lang(en)") or $("div:lang(en-us)").
2. Use a short code (en) to catch regional variants (en-US, en-GB).
3. Use a full tag (en-us) when you need one region only.
4. Remember descendants inherit language from ancestors without their own lang.
5. Prefer :lang() over [lang=…] when inheritance or prefix matching matters.

Pseudocode

matches = []
for each element in search context:
    lang = resolved language of element
           (own lang=, or inherited from ancestor)
    if lang equals code
       or lang starts with code + "-":
        matches.add(element)

return matches

// :lang(en)  → en, en-US, en-GB
// :lang(en)  ✗ english  (no hyphen after "en")

Cheat Sheet

Keep these facts handy while matching by language.

Live Preview

Run different language selectors against a small multilingual sample and see how many elements match.

$("div:lang(en-us)")
matched: 3

/* parent + two children inherit en-us */

jQuery Examples

Short, copy-ready snippets. Open DevTools Console with jQuery loaded, or use Try It Yourself for a live editor.

$("div:lang(en-us)").attr("data-region", "usa");
$("div:lang(es-es)").attr("data-region", "spain");

$("#out").text(
  "en-us: " + $("div:lang(en-us)").length +
  " · es-es: " + $("div:lang(es-es)").length
);

en-us: 4 · es-es: 4
Outer + nested divs tagged per language

console.log(":lang(en) →", $("div:lang(en)").length);
console.log(":lang(en-us) →", $("div:lang(en-us)").length);
console.log(":lang(en-gb) →", $("div:lang(en-gb)").length);

:lang(en) → 3
:lang(en-us) → 1
:lang(en-gb) → 1

console.log(":lang(fr) →", $("*:lang(fr)").length);
console.log('[lang="fr"] →', $('[lang="fr"]').length);

:lang(fr) → 2
[lang="fr"] → 1
Child without lang= still matches :lang(fr)

$("div:lang(ja) span").each(function () {
  this.appendChild(document.createTextNode(" [ja]"));
});

$("#out").text("Matched spans: " + $("div:lang(ja) span").length);

Matched spans: 2
Spans inherit ja from the parent div

$("article:lang(de)").each(function () {
  this.insertBefore(document.createTextNode("[DE] "), this.firstChild);
});

$("#out").text("German articles: " + $("article:lang(de)").length);

German articles: 1
[DE] shown only on the de article

Performance Notes

Because :lang() is standard CSS, modern browsers can run it via querySelectorAll. Scope with a tag or container when the DOM is large.

Key Takeaways