Attribute Selectors

Because jQuery supports both CSS and XPath-style expressions and the two conflict in their use of square brackets, jQuery adopts the XPath notation for attribute selectors, beginning them with the @ symbol.

When using any of the following attribute selectors, we should account for attributes that have multiple, space-separated values. Since these selectors see attribute values as a single string, this selector, for example, $('[a@rel=nofollow]'), will select <a rel="nofollow" href="example.html">Some text</a> but not <a rel="nofollow self" href="example.html">Some text</a>.

Attribute values in selector expressions can be written as bare words or surrounded by quotation marks. Therefore, the following variations are equally correct:

The variation we choose is generally a matter of style or convenience.

Has Attribute: [@foo]

All elements that have the foo attribute.

  1. $('a[@rel]'): selects all elements matched by <a> that have a rel attribute
  2. $('p[@class]'): selects all elements matched by <p> that have a class attribute

For more information on this attribute selector, see the introduction to Attribute Selectors above.

Attribute Value Equals: [@foo=bar]

Elements that have the foo attribute with a value exactly equal to bar.

  1. $('a[@rel=nofollow]'): selects all elements matched by <a> that have a rel value exactly equal to nofollow
  2. $('input[@name=myname]'): selects all elements matched by <input> that have a name value exactly equal to myname

For more information on this attribute selector, see the introduction to Attribute Selectors above.

Attribute Value Does Not Equal: [@foo!=bar]

All elements that do not have the foo attribute with a value exactly equal to bar.

  1. $('a[@rel!=nofollow]'): selects all elements matched by <a> that do not have a rel attribute with a value exactly equal to nofollow
  2. $('input[@name!=myname]'): selects all elements matched by <input> that do not have a name attribute with a value exactly equal to myname

Since these selectors see attribute values as a single string, $('[a@rel!=nofollow]') we will select <a rel="nofollow self" href="example.htm">Some text</a>.

If we need to select only <a> elements that do not have nofollow anywhere within their rel attribute, we can use the following selector expression instead: $('a:not([@rel*=nofollow])').

Attribute Value Begins: [@foo^=bar]

All elements that have the foo attribute with a value beginning exactly with the string bar.

  1. $('a[@rel^=no]'): selects all elements matched by <a> that have a rel attribute value beginning with no
  2. $('input[@name^=my]'): selects all elements matched by <input> that have a name value beginning with my

Since these selectors see attribute values as a single string, $('[a@rel^=no]') will select <a rel="nofollow self" href="example.htm">Some text</a> but not <a rel="self nofollow" href="example.htm">Some text</a>.

Attribute Value Ends: [@foo$=bar]

All elements that have the foo attribute with a value ending exactly with the string bar.

  1. $('a[@href$=index.htm]'): selects all elements matched by <a> that have an href value ending with index.htm
  2. $('a[@rel$=self]'): selects all elements matched by <p> that have a class value ending with bar

Since these selectors see attribute values as a single string, $('[a@rel$=self]') will select <a rel="nofollow self" href="example.htm">Some text</a> but not <a rel="self nofollow" href="example.htm">Some text</a>.

Attribute Value Contains: [@foo*=bar]

All elements that have the foo attribute with a value containing the substring bar.

  1. $('p[@class*=bar]'): selects all elements matched by <p> that have a class value containing bar
  2. $('a[@href*=example.com]'): selects all elements matched by <a> that have an href value containing example.com

This is the most generous selector of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value. Therefore, $('p[@class*=my]') will select <p class="yourclass myclass">Some text</p>, <p class="myclass yourclass">Some text</p>, and <p class="thisismyclass">Some text</p>.