How can i inherit properties from the css id rule to the css class?

I have a css class rule:

.test{ text-align:center; font-family:Verdana; }

And i want to create another id rule (I hope It is right calling by "id rule" ):

#divNew1{ color: Red; }
#spanNew2{ color: Green; }
#pNew3{ color: Yellow; }

I have a lot of div elements. I want to pass .test class properties to other elements with only changing css file. That's why i don't want to add class attribute to div elem开发者_JS百科ents. The html code below:

<div id="divNew1">Ta ta taaaaa</div>
<span id="spanNew2">Ta ta taaaaa</span>
<p id="pNew3">Ta ta taaaaa</p>

But i want to add .test class properties to #divNew class by using inheritance and i don't want to add class attribute to the div like as above. Is there any way to do this?

Just include the ID class on the upper declartion, the last declaration for any property wins. E.g. if the first rule had a color: Green;, .test would be green, #divNew would still be red.

.test, #divNew{ text-align:center; font-family:Verdana; }
#divNew{ color: Red; }

I believe the question is, can my "#divNew" CSS rule inherit the properties of the existing ".test" rule so that:

[Psuedo Code]

.test { color: red; }

#divNew : .test { border: 1px solid Black }

... results in an element with an id of #divNew getting both red text and a black border.

And the answer is no - there is no syntax for declaring the inheritance of one rule by another rule - but you can apply multiple CSS rules to one element.

In this example, the element would take the rules for "#divNew" and ".test" and ".another". It would override any conflicting properties with the last rule in your CSS.

<div id="#divNew" class="test another">...

LESS/dotLess allow you to perform additional processing within a CSS file on the server side, using a CSS style syntax. LESS. I'd link to dotLess, but I can't find a functioning link at present (http://www.dotlesscss.com/ is coming up empty for me)

edit

Or T4CSS from Phil Haack

What do you mean by inheritance? If in your HTML #divNew is a child of .test, then CSS properties of .test are already inherited by it (unless you override them by setting specific #divNew properties).

Syntax for adding properties directly to #divNew which is also .test:

#divNew.test {/*properties*/}

Syntax for adding properties to #divNew which is a child of .test:

.test #divNew {/*properties*/}

<div id="divNew" class="test">Ta ta taaaaa</div>

Not sure to understand you, but:

.test{ text-align:center; font-family:Verdana; }
#divNew.test{ color: Red; }