How to choose identifiers containing special characters?

Question

I am working with a part of HTML that I cannot change. One of the identifiers in the document:

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

This is perfectly valid HTML5 syntax for identifiers , however it is not possible to select this identifier in CSS without problems with >and ..

How can I select this id in CSS?

Answer 1

You can avoid special characters with backslashes:

#a\>span\.tex {
  color: red;
}

<div id="a>span.tex"> Some funky ID </div>

Run codeHide result

You can even use backslashes in your ID as long as you avoid them with another backslash:

#a\\span\\tex {
  color: red;
}

<div id="a\span\tex"> Some funky ID </div>

Run codeHide result

In fact, lots of crazy lines are valid identifiers in HTML5

#\¯\\\_\(\ツ\)\_\/\¯ {
  color: red;
}

<div id="¯\_(ツ)_/¯"> ¯\_(ツ)_/¯ - but why would you? </div>

Run codeHide result

Answer 2

:

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

div id, id