0

When I put a number as a div id or class, the image specified in the css doesn't appear.

(But when I put a letter, it does)

I need for the div id or class to be a number (it CANNOT be a letter)

How can I do this?

<div id="88"></div>

<style>
#88 {
  content: url('http://bithumor.co/144115662788085.gif');
  width: 30px;
  height: 30px;
  display: inline;
  z-index: 999999;
  position: absolute;
}

</style>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
PHP Web Dev 101
  • 535
  • 2
  • 9
  • 21

3 Answers3

2

You cannot use a number as the id HTML 4. It must start with a letter. May I suggest that you make it something like a88, and then whatever code you are doing just removes the a at the beginning. If you have more details about what you are trying to do we can give a more helpful answer.

Once you have a valid ID for your doctype the background image will display.

Ben
  • 99
  • 3
2
  1. You cannot use Content property without pseudo selectors ::after or ::before. Use background property instead.
  2. Access the element with [id='88'] or #\38\38 where \3 is just escaping the digits.

#\38\38 {
  background: url('http://placehold.it/300x300');
  width: 300px;
  height: 300px;
  display: block;
  z-index: 999999;
}
<div id="88">Test</div>

Additional info:

Thanks to @torazaburo for his comments.

If the browser supports HTML5, then the ID is valid, or else the browser is not conformant. It may be splitting hairs, but CSS does not adhere to HTML rules about naming. The problem here, then, is not that the HTML ID is invalid, it is that the CSS is invalid unless escaped

The ID attribute can take any form as mentioned in the below article which is W3C Recommendation.

Reference

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

Community
  • 1
  • 1
m4n0
  • 29,823
  • 27
  • 76
  • 89
  • You've quoted the HTML 5.1 document, mentioning that it's in draft phase, but rules for IDs are loosened in HTML5, which is already a W3C recommendation. –  Sep 02 '15 at 03:07
  • But it is not perfectly valid yet in all browsers. – m4n0 Sep 02 '15 at 03:17
  • Yes, it's not valid in those that do not support HTML5. Which doesn't change the fact that the relevant standard is HTML5, not HTML5.1. –  Sep 02 '15 at 03:19
  • It is still not valid even though the browser supports HTML5. Trying running the code without the escape character. I have also mentioned `In future` all browsers will support this. – m4n0 Sep 02 '15 at 03:29
  • 1
    You are confusing valid HTML IDs with valid CSS identifiers used in rules selecting elements by their ID. If the browser supports HTML5, then the ID of `88` **is** valid, or else the browser is not conformant. It may be splitting hairs, but CSS does not adhere to HTML rules about naming. The problem here, then, is not that the HTML ID is invalid, it is that the CSS is invalid unless escaped as you correctly did. –  Sep 02 '15 at 03:33
2

Other answers have pointed to the problem of using a numeric ID. They are right in theory, but in practice all modern browsers support numeric IDs. So, for example, getElementById('88') will work.

The problem lies not with the HTML, but with the CSS. CSS has the notion of CSS identifiers, which is not identical to the rules for HTML IDs. A rule using an invalid CSS identifier as an ID (#88) is invalid and therefore ignored. This is not because it is an invalid HTML ID; it is because it is an invalid CSS identifier.

Therefore, as @Manoj Kumar correctly pointed out, you can get around this problem by escaping the ID in the form #\38\38.

This same trick could be used in the case of a classname containing a colon. You might say, that's invalid. Technically it may be so, but it works fine in HTML. The problem is how to escape the colon; in this case, you can do it with a single backslash, as in a\:b.

The other confusing thing about your example is that you are using the content property with a selector which is not either a ::before or ::after pseudo-selector. That's also "invalid". You should fix it. I would by no means rely on this working on all browsers. However, it works, as it turns out, at least in Chrome (but not in FF, for example).

Similarly, the syntax for the value you are giving to the content property is not valid. Correct values include strings, or the attr() syntax. So you should also fix this. It's non-standard. It works only by accident. You should use background-image instead.