Why the id can't be number in css selector?

Question

I found that number can't be in css selector.

<!DOCTYPE html>
<html>
<style type="text/css">
  div{width:350px;word-wrap:break-all; }
  #1{float:left;}
</style>
<div class="up">
  <p><img id="1" src="http://i.imgur.com/Vt9ni32.jpg?1" /> Web graphics are visual representations used on a Web site to enhance or enable the representation of an idea or feeling, in order to reach the Web site user. Graphics may entertain, educate, or
emotionally impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for interfaces. Examples of graphics include maps, photographs, designs and patterns, family trees, diagrams, architectural or engineering
blueprints, bar charts and pie charts, typography, schematics, line art, flowcharts, and many other image forms.
  </p>
</div>

</html>

When number in css selector,the text in the right don't begin from top ,a gap remains here,it is no use for you to change id=1 into id=2 or other number ,and change #1{float:left;} into #2{float:left;} ,the gap remains there.
If i change the number into word,gap vanish as below.

<!DOCTYPE html>
<html>
<style type="text/css">
  div{width:350px;word-wrap:break-all; }
#test{float:left;}
</style>
<div class="up">
  <p><img id="test" src="http://i.imgur.com/Vt9ni32.jpg?1" /> Web graphics are visual representations used on a Web site to enhance or enable the representation of an idea or feeling, in order to reach the Web site user. Graphics may entertain, educate,
or emotionally impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for interfaces. Examples of graphics include maps, photographs, designs and patterns, family trees, diagrams, architectural or engineering
blueprints, bar charts and pie charts, typography, schematics, line art, flowcharts, and many other image forms.
  </p>
</div>

</html>

Its not that an ID can't be a number. It can be any alphanumeric value, but it just can't start with a number, it has to start with a letter. ref: https://msdn.microsoft.com/en-us/library/ms533880(v=vs.85).aspx — zipzit, May 05 '16 at 01:16
Note: I do see from [Mozilla](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) That `this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.` And with that said, I believe that this is a pure duplicate of other answers in stackoverflow. Found it: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html/79022#79022 — zipzit, May 05 '16 at 01:23

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

In HTML 4 you shouldn't use an ID starting with a number, it may render, but (as you have experienced) some functionality might break. In HTML 5 however you can: (acceptable IDs), but the new HTML ID spec doesn't carry through to CSS though, so selectors will still fail! Read more here

edited May 23 '17 at 11:59

Community

1
1

answered May 05 '16 at 01:20

Griknok

384
2
13

score 0 · Accepted Answer · answered May 05 '16 at 01:22

0

HTML 5 is happy to allow ID's to start with a number, however CSS isn't: read more here

answered May 05 '16 at 01:22

Griknok

384
2
13

Great write-up at that link target! – Mark A. Fitzgerald May 05 '16 at 01:24
One delightful thing I discovered is that IE does not like names beginning with numbers in a form. If you try to do form['1_inforow'] it will actually convert that to a 1 and return the first form input :/ – karina May 05 '16 at 04:34

Why the id can't be number in css selector?

2 Answers2