Use a colour (e.g. #ccc) as css ID or Selector

Question

For some particular needs, I have got a class called {COLOUR} (in php) which is replaced by a #333, #cccccc or #b13131, depending on various circumstances.

This is a problem of course.. I know, but I would like to know if is there possible to apply some css rules to this class.

e.g.

if {COLOUR} returns a css class "#cccccc", I want to do the following:

.#cccccc {
my css rules;
}

but this is not working, of course..

I tried adding a prefix to the class given in php, so it was changed from class="{COLOUR}" to class="something-{COLOUR}".

So I tried

.something-#cccccc {
my css rules;
}

but it didn't work, again.

I do really need to apply some css rules to this {COLOUR} and I really hope you guys can help me solving this issue.

Thank you very much!

PS:

If a solution is possible using php (and it's maybe easier for you, it could be also good! I'm not an expert in php but I was thinking about:

if {COLOUR} = #cccccc then apply X css rules, if {COLOUR} = #333 then apply Y css rules etc etc.

Thanks again!

Answer 1

Not really Joomla! related. You should ask questions like these better at stackoverflow. But as a quick answer:

You can escape the hash sign:

.\#cccccc {
    // my css rules;
}

.something-\#cccccc {
    // my css rules;
}

This should also work:

[class="#cccccc"] {
    // my css rules
}

Though I think it's not a real nice way to make CSS class names as color hex codes. A better approach would be to give them a semantic meaning.

Answer 2

+1 to @fruppel's answer, however I would not recommend using a hex only as a CSS class.

A CSS class name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers.

So if you're hex is 232323, then this would not work.

Instead, I'd suggest always adding a prefix to the hex, for example:

.prefix-\#cccccc {
    // some rule;
}

Hope this helps