Using special char in css class name works sometimes, except for one case

Question

I'm passing in the page's filename with php into a selector in order to load a corresponding background-img for some page's header sections from the CSS. Due to the setup of my CMS, I'm forced to include the trailing slashes as well. So instead of a nice clean < header class="bg-pagename" >, it comes through as < header class="bg-/pagename/" > which is making things hairy in my CSS.

In my CSS file, I'm going by the solution here wyqydsyq Jun 5 '12 (\2f becomes /) which has worked for 5 page names so far, until I hit this one. Not sure why.. is there a regex or special character that's making this not work?

DOESNT WORK IN CSS FILE:
header.bg-\2fcomp-tour\2f {}

WORKED:
header.bg-\2fhol-tour\2f {}
header.bg-\2flaw-tour\2f {}
header.bg-\2fhigh-tour\2f {}
header.bg-\2fglam-tour\2f {}

(And yes I did think to "clean" the initial php function and remove the forward slashes before echoing the page name, but that just wasn't working for some reason :/ )

Answer 1

In \2fcomp, the letter C is a hexadecimal digit. So the parser is treating the escape sequence as \2fc, not \2f. As you can imagine, \2fc represents a completely different character to \2f. As a result, the selector fails to match.

G, H and L are not hexadecimal digits, so their corresponding selectors work as expected.

You work around this by space-padding the escape sequence like so:

header.bg-\2f comp-tour\2f

You can also just write \/ to represent a forward slash, instead of \2f, then you don't have to worry about hex digit collisions — it does look a little funny, though:

header.bg-\/comp-tour\/
header.bg-\/hol-tour\/
header.bg-\/law-tour\/
header.bg-\/high-tour\/
header.bg-\/glam-tour\/