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 HTML 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 */
}
/* Or, you can "escape" the number, which looks funky but works: */
#\31 800number_box {
/* does work */
}
/* See: http://mothereff.in/css-escapes */
I just spent 1 hour figuring why #1Col #content wasn’t working…
Thanks for the tip!
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
Any idea if they can start with an underscore? validator.w3.org isn’t throwing any errors, but I’m still not 100% sure.
It’s perfectly valid in HTML5.
No, no it isn’t, and it doesn’t work either. http://codepen.io/chriscoyier/pen/Ctxcu
Not yet, but I think it’s coming. http://www.w3.org/html/wg/drafts/html/master/dom.html#the-id-attribute
Example, or quick test here » http://cdpn.io/Ctxcu
Ack, sorry!
…here is the test example » CodePen – Pen http://codepen.io/anon/pen/eqFgk via @codepen
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.
Well, I tried classes started with numbers in the latest chrome version, and it’s not working…
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.
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?