Can I have an element that has an id
that starts with or is completely numbers?
E.g. something like this:
<div id="12"></div>
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.
In contrast to the class attribute, which allows space-separated values, elements can only have one single ID value. Note: Technically, the value for an id attribute may contain any character, except whitespace characters.
The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document.
getElementById() The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.
Can I have a div with id as number?
Yes you can, but selecting/styling it with a CSS selector will be a pain.
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 id
s 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 and you're probably better off staring the id
with a letter, 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:
Below is an example using a div
with the id
"12" and doing things with it three ways:
document.getElementById
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:
"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 <code>document.querySelector</code>:"); display("document.querySelector(\"#\\\\31\\\\32\").style.fontStyle = \"italic\";", "pre"); } else { display("(This browser doesn't support <code>document.querySelector</code>, 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; }
<div id="12">This div is: <code><div id="12">...</div></code> </div> <p>In the above:</p> <p>The background is set using CSS:</p> <pre>#\31\32 { background: #0bf; }</pre> <p>(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, <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">see the CSS spec</a>.)</p> <p>The border is set from JavaScript using <code>document.getElementById</code>:</p> <pre>document.getElementById("12").style.border = "2px solid black";</pre>
I've never seen the above fail in a browser. Here's a subset of the browsers I've seen it work in:
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.
From the HTML 5 specs...
The id attribute specifies its element's unique identifier (ID). [DOM]
The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
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.
An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.
Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.
So... yes :)
From the HTML 4.01 specs...
ID must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
So... no :(
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With