Posso ter um elemento com um ID que comece com um número?

Dividir o ID de um elemento por um número pode parecer uma prática incomum, mas é perfeitamente possível em HTML. No entanto, é essencial observar que, embora válido, o uso de IDs numéricos pode apresentar desafios ao selecionar e estilizar elementos com CSS.

HTML permite valores de ID compostos apenas de dígitos; qualquer caractere, exceto um espaço, é considerado aceitável. Os navegadores têm apoiado historicamente essa prática, levando ao relaxamento de restrições mais rígidas na especificação HTML5.

Embora o uso de IDs numéricos em HTML seja tecnicamente viável, é prudente ter cuidado ao usá-los em seletores CSS. Os seletores de id CSS não permitem IDs começando com dígitos, necessitando de seu escape. Por exemplo, #12 é inválido como seletor CSS e deve ser especificado como #\31\32.

Para aqueles que pretendem usar IDs numéricos com seletores CSS, é recomendado começar com uma letra para simplificar. No entanto, abaixo está um exemplo que demonstra o uso de uma div com o ID "12" e vários métodos de manipulação dela:

• CSS: #\31\32 {background: #0bf;}
• JavaScript (getElementById): document.getElementById("12").style.border = "2px preto sólido";
• JavaScript (querySelector): document.querySelector("#\31\32").style .fontStyle = "italic";

Observe que o suporte para document.querySelector pode variar entre os navegadores. Os navegadores que suportam esta função poderão aplicar alterações de estilo usando o último método.