jcrs jcrs - 1 month ago 8
CSS Question

How to select ids which contain special characters?

I'm working with an HTML piece that I cannot modify. One of the ids in the document is:

<div id="a>span.tex"> ... </div>


This is perfectly valid HTML5 syntax for ids, however, it is not possible to select this id in CSS without having troubles with
>
and
.
characters.

How can I select this id in CSS?

Answer

You can escape special characters with a backslash:

#a\>span\.tex {
  color: red;
}
<div id="a>span.tex"> Some funky ID </div>

You can even use backslashes within your ID as long as you escape them with another backslash:

#a\\span\\tex {
  color: red;
}
<div id="a\span\tex"> Some funky ID </div>

In fact, lots of crazy strings are valid IDs in HTML5

#\¯\\\_\(\ツ\)\_\/\¯ {
  color: red;
}
<div id="¯\_(ツ)_/¯"> ¯\_(ツ)_/¯ - but why would you? </div>