Error in selector with a percent character in a LESS file
css, gruntjs, less, recess
Solution
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
Problem
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!