Menu
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] 
256
CSS [attribute|="value"] Selector The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).
What is a selector? You have met selectors already. A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.
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.
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
