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

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

However that doesn’t mean that CSS is happy to use an ID with that name. For example, this will not work:

The way you can work around this is by using the attribute selector:

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

However, that seems more difficult to me than the attribute selector. Other devs looking at those selectors might wonder what on earth they are.
Although if going the attribute selector route, be aware that it only works down to IE7.

The same number and selector rules apply with class names. 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:

You could either do this:

Or this:

About The Author

Leave a Reply

Notify me of followup comments via e-mail. You can also subscribe without commenting.

Copyright © MMXIV Ben Frain. My popDad makes the best cooked breakfast: fact.
302 days since this post was last revised. If this is a techie article, it's probable some details have changed.