Why do I need quotes around an attribute value with a @ in a CSS selector?

Question

I am using the following to access specific DOM elements with the placeholder "Serial"

$('input[placeholder=Serial]')

And it's working fine. I have some other DOM elements having placeholder of "@SAL", when I try to access them using:

$('input[placeholder=@SAL]')

It throws this error

Error: Syntax error, unrecognized expression: input[placeholder=@SAL]

But when I try to access the same using double quotes " around @SAL it's working fine.

Now the question is, why does $('input[name=Serial]') work fine i.e. without the double quotes around the placeholder value but $('input[placeholder=@SAL]') throw the above said error?

P.S I know it's a bad idea to access DOM elements based upon their placeholders (as they may change), but I was just curious that why is it not working in this specific case...

@ Kamran: I expect it's probably lack of research effort. This information is *very* easy to find -- it's in the jQuery docs, the CSS selectors docs, on MDN... — T.J. Crowder, Apr 29 '14 at 13:06
Does this answer your question? [CSS attribute selectors: The rules on quotes (", ' or none?)](https://stackoverflow.com/questions/5578845/css-attribute-selectors-the-rules-on-quotes-or-none) — Heretic Monkey, Jan 26 '22 at 14:24

score 7 · Accepted Answer · answered Apr 29 '14 at 12:55

It's right there in the docs -

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.

http://api.jquery.com/category/selectors/attribute-selectors/

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]).

http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

A selector that begins with the '@' is not a valid selector but can be remedied by using quotes or by escaping the characters in question.

score 1 · Answer 2 · edited Apr 29 '14 at 13:08

1

Because @ is a special character and this either needs to be escaped like this:

$('input[placeholder=\\@SAL]')

(The actual selector has one backslash, but because this is a JavaScript string literal, we have to use \\ to get a single backslash into the selector.)

or select it with string value with quotes like this:

$('input[placeholder="@SAL"]') // this does not need to escaped.

edited Apr 29 '14 at 13:08

T.J. Crowder

1,031,962
187
1,923
1,875

answered Apr 29 '14 at 12:57

Jai

74,255
12
74
103

score 0 · Answer 3 · answered Apr 29 '14 at 13:01

0

The only difference between your two situations is the @ symbol, therefore you should either escape it or I would quote it to make it a string. It should most definitely work that way.

answered Apr 29 '14 at 13:01

cpuxtech

9
1

1

@RakeshShetty Poster is just trying to help, no need to be so rude – A. Wolff Apr 29 '14 at 13:03
Just helping the OP out obviously he didn't come to that conclusion lol – cpuxtech Apr 29 '14 at 13:04
@A.Wolff I know but this is not an answer or he can post this as comment – Rakesh Shetty Apr 29 '14 at 13:05
@RakeshShetty He cannot post comment (rep<50) but you are right that's not an answer. But wait, poster seems new here on SO ;) EDIT: `member for 1 year` well, i'd say quite 'new' then – A. Wolff Apr 29 '14 at 13:06
1

@user2313721: The question is **"why"**, not "what's different". – T.J. Crowder Apr 29 '14 at 13:09
It says I have to be of a certain reputation to post a comment on a question, so I answered. And my answer was a real answer lol – cpuxtech Apr 29 '14 at 15:52

Why do I need quotes around an attribute value with a @ in a CSS selector?

3 Answers3