can I have a div with id as number?

Question

Can I have a div with id as number?

eg

Answer 1

Can I have a div with id as number?

Yes, you can.

id values that consist solely of digits are perfectly valid in HTML; anything but a space is okay. And although earlier HTML specs were more restrictive (ref, ref), requiring a small set of chars and starting with a letter, browsers never cared, which is a big part of why the HTML5 specification opens things up.

If you're going to use those ids with CSS selectors (e.g, style them with CSS, or locate them with querySelector, querySelectorAll, or a library like jQuery that uses CSS selectors), be aware that it can be a pain, because you can't use an id starting with a digit in a CSS id selector literally; you have to escape it. (For instance, #12 is an invalid CSS selector; you have to write it #\31\32.) For that reason, it's simpler to start it with a letter if you're going to use it with CSS selectors.

Those links above in a list for clarity:

• HTML5 - The ID Attribute
• HTML4 - The ID Attribute and ID and NAME tokens
• CSS 2.1 rules for IDs

Below is an example using a div with the id "12" and doing things with it three ways:

1. With CSS
2. With JavaScript via document.getElementById
3. With JavaScript via document.querySelector (on browsers that support it)

It works on every browser I've ever thrown at it (see list below the code). Live Example:

(function() {
  "use strict";

  document.getElementById("12").style.border = "2px solid black";
  if (document.querySelector) {
    document.querySelector("#\\31\\32").style.fontStyle = "italic";
    display("The font style is set using JavaScript with document.querySelector:");
    display("document.querySelector(\"#\\\\31\\\\32\").style.fontStyle = \"italic\";", "pre");
  } else {
    display("(This browser doesn't support document.querySelector, so we couldn't try that.)");
  }

  function display(msg, tag) {
    var elm = document.createElement(tag || 'p');
    elm.innerHTML = String(msg);
    document.body.appendChild(elm);
  }
})();

#\31\32 {
  background: #0bf;
}
pre {
  border: 1px solid #aaa;
  background: #eee;
}

This div is: <div id="12">...</div>

In the above:
The background is set using CSS:
#\31\32 {
    background: #0bf;
}
(31 is the character code for 1 in hex; 32 is the character code for 2 in hex. You introduce those hex character sequences with the backslash, see the CSS spec.)
The border is set from JavaScript using document.getElementById:
document.getElementById("12").style.border = "2px solid black";

I've never seen the above fail in a browser. Here's a subset of the browsers I've seen it work in:

• Chrome 26, 34, 39
• IE6, IE8, IE9, IE10, IE11
• Firefox 3.6, 20, 29
• IE10 (Mobile)
• Safari iOS 3.1.2, iOS 7
• Android 2.3.6, 4.2
• Opera 10.62, 12.15, 20
• Konquerer 4.7.4

But again: If you're going to use CSS selectors with the element, it's probably best to start it with a letter; selectors like #\31\32 are pretty tricky to read.