CODEWITHSUNDEEP
csshtml
jcrs
jcrs

Reputation: 509

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?

Upvotes: 9

Views: 3641

Answers (2)

Turnip
Turnip

Reputation: 36652

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>

Upvotes: 10

Abood
Abood

Reputation: 570

use this:

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

this will select div with id equal to your id

Upvotes: 2

Related Questions