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)

Since you have accepted an answer that does not address the “why” question, it is unclear what you are asking. — Jukka K. Korpela, Jun 27 '14 at 14:38

score 8 · Answer 1 · answered Jun 27 '14 at 13:50

8

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.

answered Jun 27 '14 at 13:50

Niet the Dark Absol

320,036
81
464
592

3

This does not answer the question “Why doesn't CSS support ids or class names, starting from numbers?” It just explains in detailt that it does not, except that it does not explain how the escapes work. – Jukka K. Korpela Jun 27 '14 at 14:37
Really, Niet the Dark Absol, it says that CSS doesn't support per docs, but could you explain why? You confused me :D – nicael Jun 27 '14 at 14:47
@JukkaK.Korpela Could you explain me why or you don't know? – nicael Jun 27 '14 at 14:47
@nicael If you want more on the why, see reagten's answer. – Niet the Dark Absol Jun 27 '14 at 15:09

score 8 · Accepted Answer · answered Jun 27 '14 at 14:02

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

The first quotation is not relevant here. The second one may explain the restriction on class selectors. For ID selectors, it might be a matter of analogy, or it might depend on the original HTML definition of `id` selectors, which required the value to start with a letter. — Jukka K. Korpela, Jun 27 '14 at 16:00
the first quotation is of course relevant. it states that a number immediately followed by an identifier will be parsed as a dimension token (e.g., .1ww = 1 x unit 'ww'), and to allow for future additions unknown units do also result in a dimension token. id selectors starting with a number conflicts with a HEX color token (e.g., #1ff <- id selector or HEX color?) please refer to [Lexical Scanner](http://www.w3.org/TR/CSS21/grammar.html#scanner) — marco.eig, Jun 28 '14 at 12:08

score 5 · Answer 3 · answered Jun 27 '14 at 13:54

5

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 */
}

answered Jun 27 '14 at 13:54

Andre Lombaard

6,985
13
55
96

It's interesting to note that the quotes around "match by attribute value" values are often optional. But not here, for the exact same reason as `#1` not being allowed in the first place :D – Niet the Dark Absol Jun 27 '14 at 13:55

score 1 · Answer 4 · edited Jun 27 '14 at 13:51

1

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.

edited Jun 27 '14 at 13:51

Niet the Dark Absol

320,036
81
464
592

answered Jun 27 '14 at 13:50

Nawed Khan

4,393
1
10
22

score 1 · Answer 5 · edited May 23 '17 at 12:15

According to the HTML5.1 Nightly from 5 October 2014, they agree that there is no reason the ID shouldn't be able to start with a number:

Note: There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

If you must use a number at the start of an ID, you could (as mentioned in the other answers) use the attribute selector, or you could escape the number.

#\31 ww
{
  background: red;
}

Aamir Shahzad · Answer 6 · 2014-10-06T16:05:54.890

1

Working Fiddle

You can achieve it with CSS but differently

HTML

<div id="1">Some Id with Number</div>

CSS

[id='1']
{
    font-size: 60px;
    color: red;
}

But

#1 /*Not gonna work*/
{
    font-size: 60px;
    color: red;
}

Similarly for Class;

Working Fiddle

CSS

[class="1"]
{
    font-size: 100px;
    color: red;
}

Is there a reason why CSS doesn't support ids and classes, starting from numbers?
One of the main reason for it is; it has no semantic meanings. e.g.

<div id="1" class="2"></div> /*has no semantic meanings*/

It can be fixed as;

<div id="header" class="top-spacing"></div>

Reference

edited Oct 06 '14 at 16:05

answered Oct 06 '14 at 15:41

Aamir Shahzad

6,683
8
47
70

1

Good, but could you answer my question? – nicael Oct 06 '14 at 15:42
@nicael I have updated the answer. One of the key aspect in html is SEO. So markup should be semantic. #s are poor have poor or no semantic meanings therefore its one the key reason that they weren't supported. – Aamir Shahzad Oct 06 '14 at 16:08

score 1 · Answer 7 · edited May 23 '17 at 11:59

To plagiarise an answer to a similar question I read a long time ago on here: It's convention carried over from other older languages.

In the past, languages such as FORTRAN and BASIC didn't require the use of spaces so something like this:

10 A1 = 10

Would be identical to this:

10A1=10

The problem is, things like this would be very difficult to understand:

111A=10

As it could be interpreted as either:

11 1A = 10

or:

111 A = 10

etc.

As a result, starting variables with a number was made illegal. This is a convention that has persisted and is still present in most languages today, CSS included.

EDIT: found the question

score 1 · Answer 8 · answered Oct 06 '14 at 18:53

I do not think that there is a CSS specific reason. This is an old standard for programming languages. Language tokenizers can be faster/simplier, if the first character can determine that the whole token is a number or an identifier (a token preceded by a numeric character must be a numeric literal).

var x = 10e4; // is this a variable?

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

8 Answers8

Linked

Related