CODEWITHSUNDEEP
htmlcss
showkey
showkey

Reputation: 348

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

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>

Upvotes: 0

Views: 105

Answers (2)

Griknok
Griknok

Reputation: 386

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

Upvotes: 1

Griknok
Griknok

Reputation: 386

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

Upvotes: 0

Related Questions