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

Question

This question has been bugging me for a while now. When writing a CSS selector that compares against an element's attribute like so.

a[rel="nofollow"]

I never know what I should be doing with the quotation marks. Are they really necessary?

Basically, what is the specification for this because I can't find it on the web site.

Are all of these considered valid?

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

I don't think they're necessary. – Headshota Apr 07 '11 at 09:27 — Headshota, Apr 07 '11 at 09:27
@Headshota: Not in this exact case, no. – Mathias Bynens Apr 07 '11 at 09:33 — Mathias Bynens, Apr 07 '11 at 09:33
http://mothereff.in/unquoted-attributes#nofollow – Mathias Bynens Apr 25 '12 at 08:52 — Mathias Bynens, Apr 25 '12 at 08:52

Mathias Bynens · Accepted Answer · 2012-04-23T11:20:28.710

86

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.

edited Apr 23 '12 at 11:20

answered Apr 07 '11 at 09:28

Mathias Bynens

144,855
52
216
248

@Wolfy87 Updated my answer with a link to an article I wrote the other day. It contains some regexes :) – Mathias Bynens Jun 14 '11 at 08:56
3

(Reproducing my answer as a comment, since I deleted it a while back) From a practical viewpoint: I'd recommend you use quotes, whether single or double. This way any special selector characters within the attribute values (other than the quotes themselves) won't need escaping. Plus — and this is just a personal coding style preference so don't take my word for it — I find it consistent with XHTML attribute quotes. – BoltClock Apr 24 '12 at 18:37
2

@BoltClock'saUnicorn Amen to that. Do yourself a favor and just use quotes consistently, it saves you a lot of headaches! – Mathias Bynens Apr 25 '12 at 08:51
This is an impressive answer, but it doesn't say anything about single quotes (unless I've missed it). Another answer here covers that, though. – domsson Jan 20 '20 at 09:57

score 29 · Answer 2 · answered Apr 07 '11 at 09:30

29

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

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

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

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

answered Apr 07 '11 at 09:30

Quentin

914,110
126
1,211
1,335

5

Might as well link to CSS3 spec instead: http://www.w3.org/TR/css3-selectors/#attribute-selectors – Mathias Bynens Apr 07 '11 at 09:31
CSS2 is actually more helpful because I am in the middle of writing a CSS2 selector engine. So CSS2 is better for me but thanks for the link anyway. – Olical Apr 07 '11 at 09:34

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

2 Answers2

Linked

Related