CODEWITHSUNDEEP
css
nicael
nicael

Reputation: 18997

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

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)

Upvotes: 6

Views: 914

Answers (8)

Dávid Horváth
Dávid Horváth

Reputation: 4320

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?

Upvotes: 1

Calvin
Calvin

Reputation: 630

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

Upvotes: 1

Aamir Shahzad
Aamir Shahzad

Reputation: 6834

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

Upvotes: 1

jeffjenx
jeffjenx

Reputation: 17457

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;
}

Upvotes: 1

marco.eig
marco.eig

Reputation: 4239

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

Upvotes: 8

Andre Lombaard
Andre Lombaard

Reputation: 7105

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

Upvotes: 5

Nawed Khan
Nawed Khan

Reputation: 4401

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.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

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.

Upvotes: 8

Related Questions