Do Values in CSS Attribute Selector Values Need to Be Quoted

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

Can CSS property values be quoted?

No, CSS properties in general cannot be quoted. Some CSS properties can have quotes in their values though, like:

background: url('quoted/path');

Certain CSS properties also accept a string as their value, which of course must be surrounded by quotes. font-family is an example of a property which can accept a string.

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.

Why does an attribute CSS selector work both with and without apostrophes?

From the specification:

Attribute values must be <ident-token>s or <string-token>s

You never need to use apostrophes. There are useful only for values with spaces.

[data=ok] {
  height:100px;
  background:red;
}
[data="ok ok"] {
  height:100px;
  background:blue;
}

<div data=ok>

</div>

<div data="ok ok">

</div>

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.

The difference between quoted and unquoted attribute selector in CSS

The above are the same. The quotes are optional for identifiers, but must be used when it is a string.

Some common examples of being a string include:

• Containing a space ()
• Beginning with a digit (0-9)
• Containing a hyphen after a digit

Here's the full spec of an 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".

---

Further reading: http://www.w3.org/TR/css3-selectors/#attribute-selectors

CSS Terminology: What are these values called in CSS quotes property?

The quotes: CSS allows you to substitute a symbol for the open and closed quotes used within the page. See this reference for more information.

The first two values specifies the first level of quotation embedding, the next two values specifies the next level of quote embedding, etc

In your example they are using the Unicode Character References.

---

Related Topics