CSS selector with period in ID

Question

The HTML spec allows for periods (.) in an id:

However, using a CSS ID selector rule will not match correc

Answer 1

You could also use the attribute selector like this:

[id='some.id'] {
  color: #f00;
}

Answer 2

After digging through the specs some more, I found the CSS spec does allow for backslash (\) escaping like most languages.

So in my example, the following rule would match:

#some\.id {
  color: #f00;
}

Answer 3

Since you are using id, you can also use document.getElementById() which checks the id value as a normal string and not a CSS selector. e.g. the following works too:

const myElem = document.getElementById("some.id");

The only drawback is, you can't limit the scope of search, like you could with querySelector e.g. someElement.querySelector(). but since Ids should always be unique, a document wide search with id is valid.