Grow your CSS skills. Land your dream job.

ID’s Cannot Start With a Number

Published by Chris Coyier

Tempted to use something like "1800number_box" for a ID? Don't. Because it won't work. Class identifiers are allowed to start with a number, but ID identifiers are not.

That is all.

BUT

If you have already existing code using it that way that you absolutely can't change, you can access it with:

[id='1800number_box'] {
 /* does work */
}

#1800number_box {
  /* doesn't work */
}

Comments

  1. I just spent 1 hour figuring why #1Col #content wasn’t working…
    Thanks for the tip!

  2. well is there any scientific reason behind this or its just a rull as you said “That is all.” please let me know if you have a link to this

    regards
    Surja

  3. Any idea if they can start with an underscore? validator.w3.org isn’t throwing any errors, but I’m still not 100% sure.

  4. bill
    Permalink to comment#

    It’s perfectly valid in HTML5.

  5. Permalink to comment#

    Example, or quick test here » http://cdpn.io/Ctxcu

  6. Permalink to comment#

    Ack, sorry!

    …here is the test example » CodePen – Pen http://codepen.io/anon/pen/eqFgk via @codepen

  7. I just spent a good 30 minutes wondering why the css file (compiled from .less) was showing up blank in firebug. I had wrapped the entire stylesheet in a module of #2awesome… lol. Thanks Chris.

  8. surunzi
    Permalink to comment#

    Well, I tried classes started with numbers in the latest chrome version, and it’s not working…

    • agent57
      Permalink to comment#

      Same here, with Firefox. Oh my god I just spent so long wondering why my .177_wide class was just completely being ignored by everything including Code Inspector.

  9. Anth Winter

    If I set an ID in the HTML as:

    and then link to it with:

    <a href="#2.1" rel="nofollow">Link to 2.1</a>

    That works fine. When I validate the code with W3 there are no errors.

    So, in a way, ID’s can start with a number if your only using them in the HTML?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".