Why is my CSS selector invalid?

Question

I'm trying to use the following database ID as a selector

5b4bb7d2685cfb094b1d46c3

The snippet is as follows:

document.querySelector('#5b4bb7d2685cfb094b1d46c3')

<button id="5b4bb7d2685cfb094b1d46c3">

When I try the selector, I get the following error:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#5b4bb7d2685cfb094b1d46c3' is not a valid selector.

What is wrong with my selector?

An ID selector cannot start with a number. – 31piy Jul 18 '18 at 07:37 — 31piy, Jul 18 '18 at 07:37

CodingIntrigue · Accepted Answer · 2018-07-18T07:47:56.057

10

Although this is valid in HTML, you can't use an ID starting with an integer in CSS selectors. You could use an attribute selector instead:

document.querySelector("[id='5b4bb7d2685cfb094b1d46c3']")

Or switch to using getElementById if that is an option:

document.getElementById("5b4bb7d2685cfb094b1d46c3")

edited Jul 18 '18 at 07:47

answered Jul 18 '18 at 07:37

CodingIntrigue

65,670
26
159
166

I tried this and I still get: Failed to execute 'querySelector' on 'Document': '[id=5b4bb7d2685cfb094b1d46c3]' is not a valid selector. – Hoa Jul 18 '18 at 07:41
@Hoa Try the updated code, I forgot to quote the attribute value :) – CodingIntrigue Jul 18 '18 at 07:42
Thanks - much appreciated! – Hoa Jul 18 '18 at 07:45

score 4 · Answer 2 · answered Jul 18 '18 at 07:38

4

You can also use document.getElementById('5b4bb7d2685cfb094b1d46c3')

answered Jul 18 '18 at 07:38

Programmer

1,813
1
10
19

I would imagine `getElementById` would be faster than `querySelector("[id='']")` too. – CodingIntrigue Jul 18 '18 at 07:46

score 0 · Answer 3 · answered Jul 18 '18 at 07:38

You are allowed to start an ID with a digit, but with querySelector you have to follow the CSS standards.

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.

Use document.getElementById("5b4bb7d2685cfb094b1d46c3") instead.

Reference:

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document'

score 0 · Answer 4 · answered Jul 18 '18 at 07:38

0

QuerySelector method uses CSS3 selectors for querying the DOM and CSS3 doesn't support ID selectors that start with a digit.

answered Jul 18 '18 at 07:38

Nico Zimmer

192
12

Why is my CSS selector invalid?

4 Answers4