The attribute contains word selector — written [name~="value"] — matches when a whole word in a space-separated attribute value exactly equals your search string. It is the right tool for class lists and other token attributes, available since jQuery 1.0.
[attr~="x"]
Space-delimited
Whole word only
name~=man
*=Not substring
CSS + jQuery
Some HTML attributes hold lists of tokens separated by spaces. The class attribute is the familiar example — class="btn primary active" contains three words. The contains word selector lets you target elements where one of those words exactly matches your search string.
The tilde equals syntax [attribute~="value"] splits the attribute on whitespace and compares each token to value. A match requires equality — not a substring inside a longer token. jQuery has supported this selector since 1.0, and it is standard CSS you can use in stylesheets too.
Imagine the attribute value as a row of tiles separated by spaces. The selector asks: “Is any single tile exactly equal to my search word?”
class="nav active open" + [class~="active"] → matches (word found).class="inactive" + [class~="active"] → no match (active is inside a longer token).name="mr man" + [name~="man"] → matches (man is its own word).name="human" + [name~="man"] → no match (only one word: human).For everyday class styling, .active is shorter than [class~="active"]. Use ~= when the attribute is not class — or when you are learning how token matching differs from substring matching (*=).
Official jQuery API form (since 1.0):
jQuery( "[attribute~='value']" )
// shorthand:
$( "[attribute~='value']" )
// common on class tokens:
$( "[class~='active']" )class, name, rel, etc.).$( "input[name~='man']" ).val( "mr. man is in it!" );
// Matches name="man", name="mr man", name="bat man"
// Does NOT match name="human" or name="superman"| name value | [name~="man"] | [name*="man"] |
|---|---|---|
man | Matches | Matches |
mr man | Matches | Matches |
human | No | Matches |
superman | No | Matches |
woman | No | Matches |
[attr~="word"] vs [attr*="word"]Word selector requires a exact token; contains selector matches any substring — the docs recommend ~= for many class-like cases.
[class~="btn"]Token equals btn
[class*="btn"]btn anywhere — toolbar too
.btnShorthand for class
rel roleNon-class token attrs
Example 1 follows the official jQuery API demo. Examples 2–5 contrast ~= with *=, demonstrate class tokens, and show scoped selection. Use the Try-it links to run each snippet.
Set value on inputs whose name attribute lists contain the word man.
input[name~='man']Official jQuery demo — match inputs where man is a separate word in the name attribute.
$( "input[name~='man']" ).val( "mr. man is in it!" );
// Matches: name="man", name="mr man", name="bat man"
// Skips: name="human", name="superman", name="woman"jQuery splits each name on whitespace. Only inputs with a token exactly equal to man are updated — substring matches inside one word do not count.
.is()Compare several name values against the word selector programmatically.
var names = [ "man", "mr man", "human", "superman", "bat man" ];
names.forEach( function( n ) {
var $el = $( "<input>" ).attr( "name", n ).appendTo( "body" );
console.log( n, "→", $el.is( "[name~='man']" ) ? "MATCH" : "no" );
$el.remove();
});human and superman fail because man is not a standalone token — unlike the substring selector [name*="man"], which would match them.
Class tokens, operator comparison, and scoped queries.
[class~='active']The classic token use case — find elements that include active as a class word, not as part of inactive.
$( "[class~='active']" ).addClass( "ring" );
// Matches class="tab active"
// Matches class="nav item active open"
// Does NOT match class="inactive" or class="activate"In production you would usually write $(".active"). The [class~='active'] form shows the same token logic the class selector uses under the hood.
~= vs *= on classSee why the jQuery docs suggest ~= over *= for token attributes.
$( "#tiles span" ).each( function() {
var $t = $( this );
console.log(
$t.attr( "class" ),
"| ~:", $t.is( "[class~='btn']" ),
"| *:", $t.is( "[class*='btn']" )
);
});*= treats btn as a substring — it falsely matches toolbar. ~= requires btn as its own space-separated word.
#panel [rel~='noopener']Apply behavior only to links inside a panel whose rel token list includes noopener.
$( "#panel a[rel~='noopener']" ).addClass( "external-safe" );
// rel="noopener noreferrer" → matches (noopener is a word)
// rel="external" outside #panel → ignoredrel often holds multiple space-separated link types. The word selector picks out one token without matching unrelated values that merely contain the same letters.
[class~='selected'] when mirroring selector logic in JS.a[rel~='nofollow'] for SEO-related links.[role~='button'] on elements with multiple roles.name attributes in legacy forms.*= to explain substring vs word matching.[attr~="value"]Get the full string value of the named attribute from each element.
Treat the value as a list of whitespace-delimited words (tokens).
If any token exactly equals the search string, the element matches.
Matched elements become a jQuery object for chaining further methods.
class, rel, etc.).*= for that.The attribute contains word selector is part of CSS2.1 and works in jQuery 1.0+. Evergreen browsers support it in native querySelectorAll. For classes, the .classname shortcut remains the most common choice.
Supported in all modern browsers and IE7+ for attribute selectors. Native: document.querySelectorAll("[class~='active']").
Bottom line: Use ~= for token lists; use *= only when you truly need substring matching. Prefer .className shorthand when selecting by class in jQuery.
The attribute contains word selector [name~="value"] matches when a whitespace-separated token exactly equals your search string. jQuery’s official demo — $("input[name~='man']").val("mr. man is in it!") — shows the pattern on multi-word name values.
Reach for ~= on token attributes like class and rel. When you need substring flexibility, use [attr*="value"] instead — but expect broader matches.
[class~='token'] to mirror class token logic explicitly~= over *= for space-separated lists.active shorthand when selecting by class only.is("[attr~='word']") when learning edge cases$("#nav [class~='open']")human to match [name~="man"]*= on class when you mean a whole class nameprimary-btn is one word).class selector with [class~=] unnecessarily[attr~="value"]Whole-word matching in token lists.
Word token
APIDelimiters
TokensExact word
RuleStricter
CompareMain use
PatternjQuery’s docs for [attribute*="value"] explicitly note that [attr~="word"] is often more appropriate for space-separated lists — because substring matching can accidentally select toolbar when you wanted btn.
Learn suffix matching for file extensions and naming conventions.
6 people found this page helpful