Is there a reason why CSS doesn't support ids and classes, starting from numbers?

Question

I noticed that css properties aren't applied if id or class starts from number. For example, none of following will work:

.1ww{
    /* some properties here */
}

and

.1{
    /* some properties here */
}

and

#1{
    /* some properties here */
}

and

#1ww{
    /* some properties here */
}

Why doesn't CSS support ids or class names, starting from numbers? (Javascript, for example, works with numeric ids and classes)

Answer 1

In fact, the specification states that classes starting with a number will be interpreted as a dimension [1]:

CSS2 parses a number immediately followed by an identifier as a DIMENSION token (i.e., an unknown unit), CSS1 parsed it as a number and an identifier. That means that in CSS1, the declaration 'font: 10pt/1.2serif' was correct, as was 'font: 10pt/12pt serif'; in CSS2, a space is required before "serif". (Some UAs accepted the first example, but not the second.)

and since we don't know which dimensions will be introduced in the future, dimensions that do not exist in CSS are parsed as unknown dimensions:

In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".\35 5ft")

You can use class starting with numbers by escaping the first digit, which is valid according to the W3C CSS validator. check out the plunkr.

[1] Appendix G. Grammar of CSS 2.1

Answer 2

IDs and classes must be valid identifiers.

Identifiers are listed like so in the specification:

ident       -?{nmstart}{nmchar}*

So an optional - sign, followed by nmstart, followed by any number of nmchars.

The one we're interested in is nmstart, but I'll also list nmchar:

nmstart     [_a-z]|{nonascii}|{escape}
nmchar      [_a-z0-9-]|{nonascii}|{escape}

And just for completeness:

nonascii    [\240-\377]
escape      {unicode}|\\[^\r\n\f0-9a-f]
unicode     \\{h}{1,6}(\r\n|[ \t\r\n\f])?

Okay, so with all that out of the way, notice how nmstart does not include 0-9 or -. This means that IDs and classes cannot start with a number according to the CSS specification. In fact, they can't even start with -1. Or two hyphens.

This is why they are not recognised in your code.

Answer 3

Although it is not a good convention to start Id and class names with a number you can access these elements from within your css by making use of the following syntax

[class="1ww"] 
{
    /* some properties here */
}

or

[id="1"]
{
    /* some properties here */
}

Answer 4

It is a rule of CSS. Here is the link

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