Css Attribute Selectors: the Rules on Quotes (", ' or None)

CSS attribute selectors: The rules on quotes (, ' or none?)

I’ve written more extensively on the subject here: Unquoted attribute values in HTML and CSS.

I’ve also created a tool to help you answer your question: http://mothereff.in/unquoted-attributes

You can usually omit the quotes as long as the attribute value is alphanumeric (however, there are some exceptions — see the linked article for all the details). Anyhow, I find it to be good practice to add the quotes anyway in case you need them, i.e. a[href^=http://] won’t work, but a[href^="http://"] will.

The article I mentioned links to the appropriate chapters in the CSS spec.

Do values in CSS attribute selector values need to be quoted?

TLDR: Quotes are required unless the value meets the identifier specification for CSS2.1

The CSS spec might say they are optional, but the real world presents a different story. When making a comparison against the href attribute you will need to use quotes (single or double work in my very limited testing - latest versions of FF, IE, Chrome.)

Interestingly enough the css spec link referenced by @Pekka happens to use quotes around their href-specific examples.

And it's not just due to non-alpha characters like the period or slashes that give this unique situation a quote requirement - using a partial match selector ~= doesn't work if you just use the "domain" in "domain.com"

Ok, every answer here is wrong (including my own previous answer.) The CSS2 spec didn't clarify whether quotes are required in the selector section itself, but the CSS3 spec does and quotes the rule as a CSS21 implementation:

http://www.w3.org/TR/css3-selectors/

Attribute values must be CSS identifiers or strings. [CSS21] The case-sensitivity of attribute names and values in selectors depends on the document language.

And here is the identifier info:

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

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

My answer seemed correct but that's because the '~=' is a white-space selector comparator so it will never match a partial string inside an href value. A '*=' comparator does work however. And a partial string like 'domain' does work for matching href='www.domain.com'. But checking for a full domain name would not work because it violates the identifier rule.

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

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.

CSS input[type=type] need quotes?

No, quotes are not needed as per the CSS grammar rules.

The rules are a bit confusing, but here is the relevant production. Note how the value can be an identifier (unquoted for word-like values) or a quoted string.

attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ]? ']'

And the relevant tokens:

ident       -?{nmstart}{nmchar}*
nmstart     [_a-z]|{nonascii}|{escape}
nmchar      [_a-z0-9-]|{nonascii}|{escape}

string      {string1}|{string2}
string1     \"([^\n\r\f\\"]|\\{nl}|{escape})*\"
string2     \'([^\n\r\f\\']|\\{nl}|{escape})*\'

The astute reader might have noticed that "nonascii" is allowed in an identifier character: outside of the ASCII plane, all Unicode characters are technically allowed in an identifier. From a practical perspective, however, I recommend quotes in anything but "trivial" cases.

How to select an element that contains quote marks?

var test = document.querySelector('img[src="http://www.example.com/abc\\"def"]');`

Appears to work, at least for me, on chrome, when I wrote this.

Is it acceptable to use single quotes around values in HTML attributes?

Yes, that's acceptable. It works in browsers, and it's allowed by the specifications.

The HTML5 spec says:

In the HTML syntax, attributes can be specified in four different ways:

1. empty attribute syntax
2. unquoted attribute-value syntax
3. single-quoted attribute-value syntax
4. double-quoted attribute-value syntax

The HTML4 spec says:

By default, SGML requires that all
attribute values be delimited using
either double quotation marks (ASCII
decimal 34) or single quotation marks
(ASCII decimal 39). Single quote marks
can be included within the attribute
value when the value is delimited by
double quote marks, and vice versa.

Specify multiple attribute selectors in CSS

Simple input[name=Sex][value=M] would do pretty nice. And it's actually well-described in the standard doc:

Multiple attribute selectors can be used to refer to several
attributes of an element, or even several times to the same attribute.

Here, the selector matches all SPAN elements whose "hello" attribute
has exactly the value "Cleveland" and whose "goodbye" attribute has
exactly the value "Columbus":

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

As a side note, using quotation marks around an attribute value is required only if this value is not a valid identifier.

JSFiddle Demo

---

Related Topics