Using a number as an id in HTML/CSS/JavaScript? Maybe don’t.

Using JavaScript with databases when you want the ID to be a number.

So here you are (assuming here, that you are me). You are new-ish to coding, new to learning languages, but you’re feeling good with HTML and CSS …

“Look, Ma, I built my own website!”

and then you meet JavaScript and you feel like you’re at the bottom of the mountain again…

Me meeting JavaScript.

But with time, you start to get comfortable with JavaScript and so you’re doing more complicated functions, altering your db.json, and generally feeling more and more confident.

And THEN, in order to work with an element that has a slightly time-stampy feel (id = 2018111889), you make the mistake of attempting to querySelect it. And oh no, NOT AGAIN.

Me attempting to access an ID which is a number

All you wanted was to be able to access that element by ID, but your console yells are you instead.

… it seemed like a reasonable query…

BUT you remembered your # sign so you are wondering why, Console, why is “#201811189” not a valid selector.

Oh but here’s another test: you prefer querySelector but what about…

what the what?

getElementById works??? but wHy?

And so you turn to The Google for guidance and discovers a lot of sometimes seemingly conflicting information… starting with more info on ids:

1. the MDN for HTML > Global attributes > id gives several parameters for appropriate usage of ids (including no white space and being at least somewhat readable by humans)
2. the MDN for CSS > ID selectors says even less with no parameters on id names.
3. the MDN for Web APIs > Document > Document.querySelector() likewise mentions nothing special about ids.
4. W3 schools handy page on CSS Selectors finally gives us a concrete rule:

Okay. But… this element does…

AND, let’s remember, that getElementById did successfully find it!

So. Confusion.

I have since checked out a ton of blogs and stack overflow pages about this topic, and still don’t have a clear answer. There doesn’t seem to be a reason for CSS not liking ids to start with a number, it just appears to be the Rule that someone made. So, to deal with this, some recommend using “\3” or “\00003" in front of a number-leading id in order to access it (I had actually tried it and couldn’t get it to work for me…)**. Some say it can’t be done. Some say that HTML5 allows ids to start with a number, but CSS doesn’t like it… AND, with code updating frequently, it was always important to see how old this blog or answer is.

To be honest, I still don’t know The Answer to the number id/querySelector business… why CSS allows an id to be a number if it doesn’t like it… why querySelector doesn’t work but getElementById does…

BUT struggling with this allowed me to learn about datasets.

S/O to my Flatiron instructor Greg for explaining to me what datasets are and how they can be used.

Basically, instead of assigning an element with an id, we could assign the element with a data-id value. You can then access your elements with parentElement.dataset.id.

Datasets can be used to storing all kinds of information and has been very helpful. You can check out the documentation here.

In summary, I am finding (as a new coder) that there are idiosyncrasies to these languages that are Just The Way It Is — like CSS sometimes not cooperating with ids with names. There always seems to be a work-around, though, a different way to accomplish what you want to do.

And I’m just going to try to not give my elements numbered IDs, even when I want to… they’ll get a data.id instead.

** In writing this blog post, I did some more testing and FINALLY got this method to work with \00003 in front of the id number. This would have been helpful earlier this week BUT then, I would not have learned about datasets **

Reference links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
https://www.w3schools.com/css/css_selectors.asp
https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
https://www.w3.org/TR/CSS21/syndata.html#characters