1

Does it matter which way the following selector is written? It validates both ways and the W3 spec seems silent on the issue of quotation marks.

input[type=text]

Or

input[type='text']

I've seen it working both ways, but simply wondering does it always work both ways for either CSS or jQuery?

So is using the quotation marks simply a matter of preference? Semantics? CSS version?

Do we have two methods because of backward compatibility? If so, which way is best going forward?

Despite the accepted answer to this other SO question, I'm thinking this...

input[type='text']
Community
  • 1
  • 1
Sparky
  • 96,628
  • 25
  • 194
  • 277
  • In jQuery, the quotes are mandatory. – Šime Vidas Jan 29 '12 at 01:55
  • Is your question about jQuery or CSS or both? If it's a pure CSS question, given your concerns about validation where jQuery is completely irrelevant, this is a duplicate of http://stackoverflow.com/questions/5578845/css-attribute-selectors-the-rules-on-quotes-or-none and http://stackoverflow.com/questions/3851091/do-values-in-css-attribute-selector-values-need-to-be-quoted – BoltClock Jan 29 '12 at 20:33
  • @BoltClock, I was really interested in both since they share many selector rules... although my description focused on CSS since I only assumed that's where the selector rules originated. I'll also admit I never attempted to leave out the `' '` in my jQuery to see what happens. **Thank-you** for the additional reading material. – Sparky Jan 29 '12 at 20:46
  • I had a draft question-and-answer in Evernote about jQuery vs CSS selector differences... maybe I should go ahead and post it. – BoltClock Jan 29 '12 at 20:47
  • @BoltClock, Even if nobody else does, I'd certainly appreciate seeing that. – Sparky Jan 29 '12 at 20:48

3 Answers3

4

I'd sum it up this way:

  • For some sequences of characters (legal identifiers), you don't need quotes.
  • For all other sequences of characters (like anything that starts with a number), you must use quotes.
  • If you KNOW what constitutes a legal CSS identifier and that's what you have, you can leave off the quotes.
  • If you KNOW that what you have is not an identifier, you must put in the quotes.
  • If you don't want to think about it and want to do it consistently all the time, use the quotes.

For [type=text], you can leave off the quotes if you want to because text is a legal CSS identifier.

I personally prefer consistency and not having to think about it and less of a chance of making a mistake so I always put in the quotes.

jfriend00
  • 637,040
  • 88
  • 896
  • 906
3

According to the CSS spec (versions 2 and 3):

Attribute values must be identifiers or strings.

Strings are double-quoted or single-quoted, [type="text"], while identifiers, [type=text], are defined this way:

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".

Simply put, either way goes and it's a matter of preference. The advantage of strings (i.e. quoting your attribute values) is for consistency; every value can be represented as a string, but not everything can be represented as an identifier. You can run values through this page to check on whether or not you need quotes.

Dennis
  • 31,394
  • 10
  • 61
  • 78
  • Thank-you for the excellent answer but I cannot figure out how to use [that page](http://mothereff.in/unquoted-attributes) you referenced. No matter what I enter in the box, it assumes that it's meant for the `href` attribute. I guess I wasn't expecting it to say `"text"` is invalid when it clearly passes CSS validation. – Sparky Jan 29 '12 at 01:14
  • The site is expecting an unquoted attribute. What you are entering is equivalent to `type="\"text"\"`. It is just using href as an example - the value itself is what is being examined, not the attribute. – Dennis Jan 29 '12 at 02:11
1

I would use input[type='text'] going forward.

Jimmy Miller
  • 1,317
  • 9
  • 13
  • Could you expand upon the reasons we have both methods and if there's anything conclusive in the W3 spec about this. Thanks! – Sparky Jan 29 '12 at 00:24
  • I just looked at the [CSS Level 3 for Selectors](http://www.w3.org/TR/selectors/#attribute-selectors) and it appears you can use either. I personally use the single quotes because all of the teams I've worked around do so. I also use single quotes in my JavaScript. The team does it uniformly for the sake of consistency. – Jimmy Miller Jan 29 '12 at 00:34