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.


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!


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!


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.

  • Oh I'm so sorry! I thought I was on stackoverflow, I didn't notice the url! Thank you very much, I'll try it right now!
    – v3ntus
    Sep 16 '15 at 12:10
  • That's weird.. if I try with browser inspector, it actually DOES work but when I try editing the css file adding that rule, it doesn't work.
    – v3ntus
    Sep 16 '15 at 12:16
  • 1
    Make sure that the CSS file is not cached
    – fruppel
    Sep 16 '15 at 12:17
  • Oops my bad, you were right! Thanks again!
    – v3ntus
    Sep 16 '15 at 12:22
  • @fruppel Please vote in our current moderator election.
    – mickmackusa
    May 7 at 0:18

+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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.