Selecting HTML5 id and class names that start with a number in CSS

| 3 replies | Short URL: http://benfra.in/1zh

Since HTML5 it’s been valid to start an HTML element ID with a number. For example <div id="10">. From an HTML perspective, that’s fine.

However that doesn’t mean that CSS is happy to have an ID selector starting with a number. For example, this will not work:

#10 { color: red; }

That’s because even though HTML5 is quite happy for an ID to start with a number, CSS is not. CSS simply doesn’t allow selectors to begin with a number. The relevant part of the specification states:

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. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.

However, you can easily work around this by using an attribute selector:

[id="10"] {color: red;}

However, another possibility is to use a unicode character instead of a number. For example, instead of the attribute selector, you could do this:

#\31 0 {color: red;}

However, that seems more difficult to me than the attribute selector, I’d always been to look up what the correct unicode character was. Other devs looking at those selectors might also wonder what on earth they are.

If going the attribute selector route, be aware that it only works down to IE7. If you need to support older browsers than that you have my sympathies (you can still use the unicode selectors).

The same number and selector rules apply with class names. You can write a class starting with a number in HTML but to get the selector to work in CSS you either need to use the attribute selector or escape it with unicode. To exemplify the prior example with a class instead:

<div class="10">hello</div>

You could either do this:

[class="10"] {color: red;}

Or this:

.\31 0 {color: red;}

About The Author

3 Responses to “Selecting HTML5 id and class names that start with a number in CSS”

  1. Ricardo Zea

    Ben, is this still the case today (4/27/2014)?

    I’ve been looking around the web and although I see that the W3C says that it’s fine to start an ID with a digit, (http://www.w3.org/html/wg/drafts/html/master/dom.html#the-id-attribute) it doesn’t specify anything about classes starting with a digit/number.

    Also, as you can see in this fiddle (http://jsfiddle.net/hrgg2/) both ID and Class that start with a digit don’t get styled, only the ones with a ‘word’.

    Thanks.

  2. Ben Frain

    Hi Ricardo,

    Yes, all still holds true. I’ve just updated the post a little with some additional information on what the specifications say about CSS selectors.

  3. Ricardo Zea

    Yes, I read the CSS spec and figured out that HTML5 spec says one thing and CSS spec another.

    The reason I asked is because I found about skelJS (http://skeljs.org/) and I noticed that they’re using “4u” or “8u” class names and that took me back for a second. Very unusual to see something like that out there.

    Thanks for the info and update Ben.

×

Comments are closed.

216Days
216 days since this post was last revised. Specific details have probably changed.
343 words
MENU