How to select an element having a backslash in its id attribute

Question

While going through official doc ,I am unable to understand that for matching the first div ,how they have written four backslash(\) ,In my opinion there should be two backslash.I am unable to find the valid logic for this reason

 <div id="foo\bar"></div>
 <div id="foo:bar"></div>
 document.querySelector('#foo\\\\bar');  // It matches the first div

Answer 1

This is due to the browser escapes the backslash in the id attribute. So it will become

<div id="foo\\bar"></div>

So inorder to select the element we need to provide \\\\ to select the element.

var elements = document.querySelector('#foo\\\\bar');
console.log(elements);
var elements = document.querySelector('#foo\\bar');
console.log(elements);

<div id="foo\bar"></div>
<div id="foo:bar"></div>

Update based on comment You can read more information regarding this in following links:-

https://mathiasbynens.be/notes/css-escapes

https://www.w3.org/TR/CSS21/syndata.html#characters

Answer 2

You have two double backslashes. As you know, the backslashe is a "escape" character.

So your selector string become:

#foo\\bar <--- to have this string in a variable, you need to use '#foo\\\\bar'

Now, the double backslash that left (in the string) will be used (again as a escape character) by the querySelector.

You can checkout more details about how selectors can be written here.