Attribute Selectors in CSS: Quotation Mark Conundrum

When crafting CSS attribute selectors to match elements' attributes, such as a[rel="nofollow"], a persistent dilemma arises: whether or not to include quotation marks.

The Quotation Question

The CSS specification dictates guidelines for attribute selector syntax, including the placement of quotation marks around attribute values.

Are Quotation Marks Necessary?

Generally, quotation marks are not required if the attribute value consists solely of alphanumeric characters. However, exceptions exist for:

• Values containing whitespace (e.g., a[title=My Page])
• Values containing characters special to CSS syntax (e.g., asterisks, parentheses, etc.)
• Values starting with a hyphen (e.g., a[class=invalid-class])

Examples of Valid Selectors

Based on the aforementioned rules, the following attribute selectors are considered valid:

a[rel="nofollow"]

a[href^="http://"]

a[data-id='123']

Best Practice

While quotations are optional for alphanumeric values, it is considered best practice to include them to ensure consistency and prevent potential conflicts.

Resources

For a thorough analysis of this topic, refer to:

• [Unquoted Attribute Values in HTML and CSS](link provided in answer)
• [Unquoted Attribute Value Validator](link provided in answer)