Categories: Attribute

The CSS specification allows elements to be identified by their attributes. While not supported by some older browsers for the purpose of styling documents, jQuery allows you to employ them regardless of the browser being used.

When using any of the following attribute selectors, you 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 href="example.html" rel="nofollow">Some text</a> but not <a href="example.html" rel="nofollow foe">Some text</a>.

Attribute values in selector expressions must follow the rules for W3C CSS selectors; in general, that means anything other than a valid identifier should be surrounded by quotation marks.

• 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 you choose is generally a matter of style or convenience.

Note: In jQuery 1.3 [@attr] style selectors were removed (they were previously deprecated in jQuery 1.2). Simply remove the "@" symbol from your selectors in order to make them work again.