jQuery Attribute Contains Prefix [name|="value"]

What You’ll Learn

The attribute contains prefix selector — written [name|="value"] — matches elements whose attribute equals value or starts with value-. Built for language tags like en and en-US, it is part of standard CSS and jQuery since 1.0.

Introduction

HTML attributes carry metadata — language codes on links, version numbers on components, roles on custom elements. jQuery lets you filter the DOM with CSS attribute selectors inside $(), and the contains prefix form is one of the most specialized.

The pipe-equals syntax [attribute|="value"] means: “select this element if the attribute is exactly value, or if it begins with value followed by a hyphen.” CSS added this rule for language attributes where en, en-US, and en-GB share a common prefix. jQuery has supported it since version 1.0.

Understanding the Contains Prefix Selector

Think of the pipe (|=) as “equals or language-style extension.” The match succeeds in two cases:

• Exact — attribute value is identical to the string (case-sensitive in HTML).
• Hyphenated extension — value is the string, then -, then more characters.

It does not match values that merely contain the string elsewhere, start with similar letters without a hyphen boundary, or use underscores instead of hyphens.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "[attribute|='value']" )
// shorthand:
$( "[attribute|='value']" )

// combine with element types:
$( "a[hreflang|='en']" )

Parameters

• attribute — the HTML attribute name (e.g. hreflang, lang, data-version).
• value — a valid identifier or quoted string to match as exact or hyphenated prefix.

Return value

• A jQuery object containing every matched element in the search context.
• Empty collection when no attributes satisfy the prefix rule.

Official jQuery API example

$( "a[hreflang|='en']" ).css( "border", "3px dotted green" );

// Outlines links whose hreflang is "en" or "en-*"

Examples Gallery

Example 1 follows the official jQuery API demo. Examples 2–5 explore matching rules, comparisons with other operators, and scoped selection. Use the Try-it links to run each snippet in the browser.

$( "a[hreflang|='en']" ).css( "border", "3px dotted green" );

// Matches:
//   <a hreflang="en">
//   <a hreflang="en-US">
// Does NOT match:
//   <a hreflang="fr"> or links without hreflang

Links with hreflang="en" and hreflang="en-US" → green dotted border
French link and plain links → unchanged

var samples = [ "en", "en-US", "en-GB", "english", "fr", "enUS" ];

samples.forEach( function( code ) {
  var $el = $( "<span>" ).attr( "lang", code ).appendTo( "body" );
  var hit = $el.is( "[lang|='en']" );
  console.log( code, "→", hit ? "MATCH" : "no" );
  $el.remove();
});

en → MATCH
en-US → MATCH
en-GB → MATCH
english → no
fr → no
enUS → no

$( "#samples span" ).each( function() {
  var $s = $( this );
  console.log(
    $s.attr( "lang" ),
    "| pipe:", $s.is( "[lang|='en']" ),
    "| caret:", $s.is( "[lang^='en']" )
  );
});

en        | pipe: true  | caret: true
en-US     | pipe: true  | caret: true
english   | pipe: false | caret: true  ← difference
enable    | pipe: false | caret: true

$( "[data-version|='1']" ).addClass( "v1-line" );

// Matches data-version="1" and data-version="1-beta"
// Does NOT match data-version="10" or data-version="1.2" (dot ≠ hyphen rule)

Widgets with data-version="1" or "1-beta" → class "v1-line"
data-version="2" or "10" → unchanged

$( "#main-nav a[hreflang|='en']" ).addClass( "locale-en" );

// Only English links inside #main-nav are styled
// Footer or sidebar links are ignored even if hreflang matches

English links in #main-nav → class "locale-en"
English link outside nav → not styled

🚀 Common Use Cases

• Multilingual links — style or track a[hreflang|='en'] for English alternates.
• Locale toggles — show UI hints on elements with lang|="en" in a translation preview.
• API version blocks — bind handlers to [data-api|='v2'] widgets only.
• Theme families — [data-theme|='dark'] matches dark and dark-high-contrast.
• QA highlighting — outline mis-tagged locale attributes during content audits.
• Progressive enhancement — load English-only scripts when matching links exist.

📝 Notes

• Available since jQuery 1.0 — standard CSS attribute selector, not a jQuery-only extension.
• Designed for language codes; also works on any attribute with hyphen-separated prefixes.
• Matching is case-sensitive for attribute values in HTML documents.
• Requires the attribute to be present — missing attributes never match.
• Quote values containing special characters: [data-x|='en-US'].
• Not the same as [attr*="en"] (contains) or [attr~="en"] (space-separated word).

💡 Best Practices