How to select ids which contain special characters?

Question

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 1

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>

Answer 2

use this:

div[id="a>span.tex"] {
    style here;
}

this will select div with id equal to your id