How can I escape a number at the beginning of a CSS identifier?

Question

The problem comes with classes which start with a number.

I know identifiers can't begin with a number, so querySelectorAll throws an error. But getElementsByClassName accepts them.

Then, is there a way of escaping those numbers?

"[In CSS2](http://www.w3.org/TR/CSS21/grammar.html) .. to make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".\35 5ft")" — user2864740, Feb 08 '14 at 20:58
Why? There are enough `getElementsByClassName` polyfills available, so don't reinvent the wheel! — Bergi, Feb 08 '14 at 21:07
@Bergi Because they don't work like I want. And thanks for fixing the typo — Oriol, Feb 08 '14 at 21:12
@JukkaK.Korpela The questions are almost the same, but I was referring to a JavaScript way of escaping (see I used javascript tag but the other question didn't). And maybe it won't be trivial to pass from other question's answers to a javascript approach, for someone who doesn't know JS very well. Then I'm not sure if it should be closed as duplicate. — Oriol, Feb 08 '14 at 23:16
This is a specific implementation question, and, well, everything else you just said @Oriol. So I reopened it. — BoltClock, Feb 09 '14 at 03:29

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

I found the solution!

Identifiers can't start with a digit, but can start with an unicode escaped digit (see related answer).

Then, I can use

.replace(/\b\d/g, function(match){return '\\0000' + match.charCodeAt(0).toString(16);})

The code above escapes characters whose unicode code has two digits in hexadecimal. But for numbers, the following also works:

.replace(/\b\d/g, '\\00003$&')

edited May 23 '17 at 11:49

Community

answered Feb 08 '14 at 21:01

Oriol

1 Answers1