Using & in CSS selectors [closed]

Question

I have a div with id as masterResourceFor_R&D. But when I use this ID in jQuery to select this div and put a click function on it, it doesn't work. I think the problem is because of the symbol & in ID. I do not have any option to rename the ID.

How can I use this ID in jQuery?

Answer 1

You can escape the character using backslashes (\).

CSS

#masterResourceFor_R\&D { ... }

jQuery

$('#masterResourceFor_R\\&D');

JSFiddle demo.

Answer 2

Ignore using special characters as id's and class names, change it if you can, if you can't and you want to solve this mess, you need to escape that character

#masterResourceFor_R\&D {
   color: red;
}

Demo

Reference

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".