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

Question

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 elements. 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?

Answer 1

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

Answer 2

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; }

Answer 3

Not sure to understand you, but:

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

Answer 4

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">...

Answer 5

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

Answer 6

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*/}