Is it possible to retrieve only a single property from a CSS class?

Question

Example CSS File:

.testClass {
color: black;
background: red; }

Now in an HTML file, I would like to have something like

<span class="testClass:color">Text in black but without red background</span>

to only apply the color property of that class.

Is there a way to do this?

The purpose behind it (for people asking themselves "Why the hell would he want that, that's not clean CSS usage!") is that I use jQuery UI themes, and I would like the entire page to fit a theme upon change. As not all kinds of elements (e.g. the color of a link) are covered by those themes, in those cases I would like to "steal" the color property (but not more) of some other CSS class of the jQuery UI theme. If there is another way to do this, of course I'm glad to hear it as well!

Answer 1

no, you can't. you should create a new class for that case.

Answer 2

No you can't. But you can override that property as follows

<span class="testClass" style="background:none; ">
      Text in black but without red background
 </span>

OR

.testClass {
color: black;
background: red;
}

.testClassNoBack {
background: none;
}

<span class="testClass testClassNoBack" >
      Text in black but without red background
 </span>

Answer 3

It certainly could be done using js and some creativity, but it would take some time with the use of document.styleSheets and its respective rules as described here. But I wouldnt recommend it, because the rules for the document.styleSheets differ from browser to browser. Salil's solution is more cleaner and I would say that the css way is even faster to some extend.