The syntax of CSS class selectors, id selectors?

Question

In the latest version of Selectors Level 4:

The class selector is given as a full stop (. U+002E) immediately followed by an identifier.

An ID selector consists of a “number sign” (U+0023, #) immediately followed by the ID value, which must be a CSS identifier.

In the identifier link above:

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 (_); cannot start with a digit, two hyphens, or a hyphen followed by a digit.

However, in that same spec, the Grammar part:

<class-selector> = '.' <ident-token>

<id-selector> = <hash-token>

As you can see from the token links above, the syntax diagram explicitly specifies that a CSS identifer may begin with two hyphens, and the grammar of an ID selector contradicts with the grammar of a hash-token.

Which definitions should I follow?

UPDATE:

I missed a line in the bottom of the Grammar section:

In <id-selector>, the <hash-token>’s value must be an identifier.

css-variables makes this even more confusing. See my answer to this question. — BoltClock
– BoltClock, Commented Oct 30, 2016 at 16:58
Possible duplicate of Can CSS identifiers begin with two hyphens? — Oriol
– Oriol, Commented Oct 30, 2016 at 16:59

martriay · Accepted Answer · 2016-08-13 08:53:12Z

1

The hash-token diagram must be wrong, as you quoted it:

element names, classes, and IDs in selectors (...) cannot start with a digit, two hyphens, or a hyphen followed by a digit

It is very explicit

answered Aug 13, 2016 at 8:53

martriay

5,7523 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

damonh Over a year ago

Clearly, between these definitions of an ID selector, only one of them is correct, just not sure which one. I think it's also quite possible that the editors forgot to update some of the definitions (esp. links), considering it's still a working draft.

martriay Over a year ago

Definitely only one is correct, but as one of them is explicit while the other one is a generalization, I think the one I quoted is the good one

damonh Over a year ago

It turns out, (see my update) the diagram is fine, since it's not used to describe the grammar of an id selector, but a hash. And fwiw, according to the new grammar of a CSS identifier, using two hyphens at the beginning is allowed now.

Oriol Over a year ago

The quote is from CSS21. CSS Syntax 3 changed that.

Collectives™ on Stack Overflow

The syntax of CSS class selectors, id selectors?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related