Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 672
uzay95 Avatar asked Oct 17 '25 00:10

uzay95


2 Answers

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; }
like image 85
Nick Craver Avatar answered Oct 18 '25 17:10

Nick Craver


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">...
like image 22
Fenton Avatar answered Oct 18 '25 15:10

Fenton



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!