jQuery :lang() Selector

What You’ll Learn

The :lang() selector matches elements in a given language — using the HTML lang attribute and CSS prefix rules. Standard CSS since jQuery 1.9; official demo styles USA and Spain blocks.

Introduction

Multilingual sites mark content with lang="en", lang="fr", or regional tags like lang="en-US". The jQuery :lang() pseudo-class selects every element whose language matches a code you pass — ideal for styling, QA checks, or scripting locale-specific behavior.

jQuery added support for :lang() in version 1.9, following the W3C CSS specification. A selector like div:lang(en) matches elements whose language is en or starts with en- (such as en-US), but not unrelated values like english.

Understanding the :lang() Selector

Language matching follows CSS prefix rules:

• lang="en" + :lang(en) → matches.
• lang="en-US" + :lang(en) → matches (starts with en-).
• lang="en-US" + :lang(en-us) → matches when codes align.
• lang="english" + :lang(en) → no match (not a valid prefix pattern).
• Child elements can inherit language from a parent lang attribute.

📝 Syntax

Official jQuery API form (since 1.9):

jQuery( ":lang(language)" )

// typical usage:
$( "div:lang(en)" )
$( "p:lang(fr)" )
$( "article:lang(de)" )

// official demo — regional tags:
$( "div:lang(en-us)" ).addClass( "usa" );
$( "div:lang(es-es)" ).addClass( "spain" );

// exact attribute (different rules):
$( "[lang='en']" )

Parameters

• language — a language code (BCP 47 style), e.g. en, en-us, es-es.

Return value

• A jQuery object containing every element whose language matches the code or valid prefix rules.
• Empty collection when nothing matches in scope.

Official jQuery API example

$( "div:lang(en-us)" ).addClass( "usa" );
$( "div:lang(es-es)" ).addClass( "spain" );

Examples Gallery

Example 1 follows the official jQuery USA/Spain color demo. Examples 2–5 cover short vs regional codes, attribute comparison, scoped articles, and inherited language on nested divs.

$( "div:lang(en-us)" ).addClass( "usa" );
$( "div:lang(es-es)" ).addClass( "spain" );

div lang="en-us" tree → .usa (red/white/blue nested styles)
div lang="es-es" tree → .spain (red/yellow nested styles)

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

:lang(en) → 2 (en and en-US divs)
:lang(en-us) → 1 (en-US only)

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

:lang(fr) → 2 (fr and fr-CA)
[lang="fr"] → 1 (exact fr only)

$( "article:lang(de)" ).css( "borderLeft", "4px solid #2563eb" );

article lang="de" → blue left border
article lang="en" → unchanged

$( "div:lang(ja) span" ).css( "fontStyle", "italic" );

span inside div lang="ja" → italic
span inside English div → normal

🚀 Common Use Cases

• Locale styling — theme blocks with div:lang(en-us) as in the official demo.
• Multilingual QA — count article:lang(fr) sections on a page.
• Typography — different fonts for :lang(ja) vs :lang(en).
• Accessibility audits — verify lang attributes exist on translated content.
• CMS output — hook scripts to language-tagged regions only.
• CSS parity — same :lang() rules in stylesheets and jQuery.

📝 Notes

• Available since jQuery 1.9 — standard CSS pseudo-class.
• Language codes are case-insensitive in HTML — use lowercase in selectors for consistency.
• :lang(en) matches en and en-* variants, not arbitrary strings.
• Differs from [lang="en"] — exact attribute match only on that element.
• Related attribute selector: [lang|="en"] for prefix on the attribute itself.
• Always set lang on multilingual pages for accessibility and correct :lang() behavior.

💡 Best Practices