Handling a colon in an element ID in a CSS selecto

Question

This question already has an answer here:

• How to use JSF generated HTML element ID with colon “:” in CSS selectors? 2 answers

JSF is setting the ID of an input field to search_form:expression. I need to specify some styling on that element, but that colon looks like the beginning of a pseudo-element to the browser so it gets marked invalid and ignored. Is there anyway to escape the colon or something?

input#search_form:expression {
  ///...
}

Answer 1

Backslash:

input#search_form\:expression {  ///...}

• See also Using Namespaces with CSS (MSDN)

Answer 2

Using a backslash before the colon doesn't work in many versions of IE (particularly 6 and 7; possibly others).

A workaround is to use the hexadecimal code for the colon - which is \3A

example:

input#search_form\3A expression {  }

This works in all browsers: Including IE6+ (and possibly earlier?), Firefox, Chrome, Opera, etc. It's part of the CSS2 standard.