Error in selector with a percent character in a LESS file

Question

I have a div with an ID which contains a percentage symbol, like this:

<div id="foo%bar">
    stuff
</div>

And I cant avoid that, is a div that I cant change so I need to deal with that :(

I am trying to reach that element using LESS but I get an error in the line that contains the percentage when I try to compile the LESS file:

To compile the LESS file I'm using recess (https://github.com/sindresorhus/grunt-recess), a GruntJS plugin. If someone know any other tool to compile LESS files avoiding this error I will be happy to change to use it.

Thanks in advance!

Answer 1

While that is a valid (HTML5) id, it is not a valid CSS selector. From the Selectors Level 3 docs (W3C)

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".

You can use a backslash character to escape the percent sign in the selector and make it valid:

#foo\%bar {
    color:red
}

Fiddle

Answer 2

It's not a valid selector; if you have a look at JSFiddle this will not be styled. Instead, use an attribute selector, that way you'll get the expected result and your LESS will be compiled.

[id*="bar"][id*="baz"] {
    color:red
}

Working fiddle: http://jsfiddle.net/Gd2FT/2/

The best option is to refactor and remove the percentages, but I think this will suffice in the short term.

Edit: Alternatively, simpler is better:

[id="bar%baz"] {
    color:red
}