Attribute selectors
The CSS specification also allows elements to be identified by their attributes. While not widely supported by browsers for the purpose of styling documents, these attribute selectors are highly useful and jQuery allows us to employ them regardless of the browser being used.
When using any of the following attribute selectors, we should account for attributes that have multiple, space-separated values. As these selectors see attribute values as a single string, $('a[rel=nofollow]'); for example, 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:
- Bare words:
$('a[rel=nofollow self]') - Double quotes inside single quotes:
$('a[rel="nofollow self"]') - Single quotes inside double quotes:
$("a[rel='nofollow self']") - Escaped single quotes inside single quotes:
$('a[rel=\'nofollow self\']') - Escaped double quotes inside double quotes:
$("a[rel=\"nofollow self\"]")
The variation we choose is generally a matter of style or convenience. The authors choose to omit quotation marks in this context for clarity, and the examples that follow reflect this preference.
Attribute ([foo])
Select all elements that have the foo attribute, with any value.
Examples
$('[rel]')selects all elements that have arelattribute$('.myclass[style]')selects all elements with the classmyclassthat have astyleattribute
Attribute equals ([foo=bar])
Select all elements that have the foo attribute with a value exactly equal to bar.
Examples
$('[name=myname]')selects all elements that have anamevalue exactly equal tomyname$('a[rel=nofollow]')selects all<a>elements that have arelvalue exactly equal tonofollow
Description
For more information on this attribute selector, see the introduction to Attribute selectors.
Attribute does not equal ([foo!=bar])
Select all elements that do not have the foo attribute, or have a foo attribute but with a value other than bar.
Examples
$('a[rel!=nofollow]')selects all<a>elements that either have norelattribute, or have one with a value other thannofollow$('input[name!=myname]')selects all<input>elements that either have nonameattribute, or have one with a value other thanmyname
Description
As these selectors see attribute values as a single string, the first example will select <a rel="nofollow self" href="example.htm">Some text</a>. Consider the Attribute contains word selector for alternatives to this behavior.
Attribute begins with ([foo^=bar])
Select all elements that have the foo attribute with a value beginning exactly with the string bar.
Examples
$('[id^=hello]')selects all elements that have an ID beginning withhello$('input[name^=my]')selects all<input>elements that have anamevalue beginning withmy
Description
This selector can be useful for identifying elements in pages produced by server-side frameworks that produce HTML with systematic element IDs.
Attribute ends with ([foo$=bar])
Select all elements that have the foo attribute with a value ending exactly with the string bar.
Examples
$('[id$=goodbye]')selects all elements that have an ID ending withgoodbye$('input[name$=phone]')selects all<input>elements that have anamevalue ending withphone
Attribute contains ([foo*=bar])
Select all elements that have the foo attribute with a value containing the substring bar.
Examples
$('[style*=background]')selects all elements that have astylevalue containingbackground$('a[href*=example.com]')selects all<a>elements that have anhrefvalue containingexample.com
Description
This is the most generous 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>.
Compare this selector with the Attribute contains word selector, which is more appropriate in many cases.
Attribute contains word ([foo~=bar])
Select all elements that have the foo attribute with a value containing the word bar, delimited by spaces.
Examples
$('[class~=myclass]')selects all elements that have the class ofmyclass(and optionally other classes as well).$('a[rel~=nofollow]')selects all<a>elements with arelvalue includingnofollow.
Description
This selector matches the test string against each word in the attribute value, where a "word" is defined as a string delimited by whitespace. The selector matches if the test string is exactly equal to any of the words. Thus, the first example is equivalent to $('.myclass').
This selector is similar to the Attribute contains selector, but substring matches within a word do not count. Therefore, the second example matches <a rel="nofollow" href="example.html">Some text</a> as well as <a rel="nofollow self" href="example.html">Some text</a>, but does not match <a rel="nofollowself" href="example.html">Some text</a>.
Attribute contains prefix ([foo|=bar])
Select all elements that have the foo attribute with a value either equal to bar, or beginning with bar and a hyphen (-).
Examples
$('[id|=hello]')selects all elements with an ID ofhelloor an ID that begins withhello-$('a[hreflang|=en]')selects all<a>elements with anhreflangvalue ofenor beginning withen-
Description
This selector was introduced into the CSS specification to handle language attributes. The second example, for instance, matches <a href="example.html" hreflang="en">Some text</a> as well as <a href="example.html" hreflang="en-UK">Some text</a>.