4
<div class="image" id="1"></div>
<div class="image" id="2"></div>
<div class="image" id="3"></div>

http://codepen.io/Chrez/pen/KdWrBe

As you see in the codepen the styling of "id='1'" doesn't work.

I need it this way because it's for slider, and my jQuery functions work this way.

Chrez
  • 133
  • 8
  • You might make my answer as accepted answer if you got the answer you were looking for. It will help other people to know the same information. – Xahed Kamal Oct 05 '15 at 04:17

2 Answers2

6

Its CSS's rule that you can't use Number as starting character or a class or id. That is why it wont work. You at least have to put 1 alphabet before the number!

This is what said in w3c -

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.

http://www.w3.org/TR/CSS21/syndata.html#characters

Xahed Kamal
  • 2,203
  • 1
  • 20
  • 41
  • 3
    Also note: two hyphens does actually work in many browsers because of a proposed inclusion of CSS variables starting `--`. As you posted though it isn't in the actual W3C lexicon for identifiers. http://www.w3.org/TR/CSS21/grammar.html#scanner – Alejalapeno Oct 04 '15 at 15:25
2

Yes, we can't use #1 according with w3c, but this little css-hack will work: div[id="1"] or just .image[id="1"]

Val
  • 106
  • 1
  • 2