CSS attribute selectors: quotation rules ("," or none?)

Question

This question has been eavesdropping on me for a long time. When writing a CSS selector that compares with an attribute of an element, such as.

a[rel="nofollow"] 

I never know what I should do with quotation marks. Are they really necessary?

Basically, what is the specification for this, because I can not find it on the website.

Are they all considered valid?

 a[rel="nofollow"] a[rel='nofollow'] a[rel=nofollow] 

Answer 1

Here I described this topic in more detail: Unquoted attribute values ​​in HTML and CSS .

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

You can usually omit quotation marks if the attribute value is alphanumeric (however, there are some exceptions - see the related article for all details). In any case, I consider it a good practice to add quotation marks anyway if necessary, i.e. a[href^=http://] does not work, but a[href^="http://"] will be.

In the article, I mentioned links to related chapters in the CSS specification.

Answer 2

Attribute values ​​must be identifiers or strings

- http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

The first two use strings. The third uses an identifier.

Identifiers

(including element names, classes, and identifiers in selectors) can contain only characters [a-zA-Z0-9] and characters ISO 10646 U + 00A0 and above, plus a hyphen (-) and underscore (_); they cannot begin with a number, two hyphens or a hyphen followed by a number.

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

Strings can be written with double quotes or with single quotes.

- http://www.w3.org/TR/CSS2/syndata.html#strings