¿Puedo tener un elemento con un ID que comience con un número?

¿Puedo tener un div con id como número?

Sí, puedes, pero seleccionarlo/diseñarlo con un selector CSS será una molestia.

idlos valores que constan únicamente de dígitos son perfectamente válidos en HTML ; cualquier cosa menos un espacio está bien. Y aunque las especificaciones HTML anteriores eran más restrictivas ( ref , ref ), requerían un pequeño conjunto de caracteres y comenzaban con una letra, a los navegadores nunca les importó, lo cual es una gran parte de por qué la especificación HTML5 abre las cosas.

Si va a utilizar esos idcorreos electrónicos con selectores de CSS (por ejemplo, diseñarlos con CSS o ubicarlos con querySelector, querySelectorAllo una biblioteca como jQuery que usa selectores de CSS), tenga en cuenta que puede ser complicado y probablemente esté es mejor comenzar idcon una letra, porque no se puede usar literalmenteid un comienzo con un dígito en un idselector CSS ; tienes que escapar de ello. (Por ejemplo, #12es un selector de CSS no válido; debe escribirlo #\31\32). Por esa razón, es más sencillo comenzar con una letra si lo va a utilizar con selectores de CSS.

Esos enlaces de arriba en una lista para mayor claridad:

• HTML5: el atributo de identificación
• HTML4: el atributo ID y los tokens ID y NOMBRE
• Reglas CSS 2.1 para identificaciones

A continuación se muestra un ejemplo usando a divcon el id"12" y haciendo cosas con él de tres maneras:

1. Con CSS
2. Con JavaScript a través dedocument.getElementById
3. Con JavaScript vía document.querySelector(en navegadores que lo admitan)

Funciona en todos los navegadores que he utilizado (consulte la lista debajo del código). Ejemplo en vivo:

"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>&lt;div id="12">...&lt;/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>

Nunca he visto fallar lo anterior en un navegador. Aquí hay un subconjunto de los navegadores en los que lo he visto funcionar:

• Cromo 26, 34, 39
• IE6, IE8, IE9, IE10, IE11
• Firefox 3.6, 20, 29
• IE10 (móvil)
• Safari iOS 3.1.2, iOS 7
• Androide 2.3.6, 4.2
• Ópera 10.62, 12.15, 20
• Konquerer 4.7.4

Pero repito: si vas a utilizar selectores CSS con el elemento, probablemente sea mejor comenzar con una letra; Los selectores como #\31\32son bastante difíciles de leer.

Apr 15 '2011 06:04 T.J. Crowder