How to make an element inherit a set of CSS rules for another element?

Question

Say I have a <div> like this that is going to have all of the same properties with a background image or something like that:

div.someBaseDiv {     margin-top: 3px;     margin-left: auto;     margin-right: auto;     margin-bottom: 0px; } 

And I wanted to inherit from it like this:

div.someBaseDiv someInheritedDiv {     background-image: url("images/worldsource/customBackground.gif");     background-repeat: no-repeat;     width: 950px;     height: 572px; } 

Of course I’m pretty sure this is written wrong, and I’m not afraid to ask for help, so can someone tell me how to make this work and include the HTML markup?

Answer 1

The easiest is to add your someInheritedDiv element to the first rule like this.

div.someBaseDiv, #someInheritedDiv {     margin-top:3px;     margin-left:auto;     margin-right:auto;     margin-bottom:0px; } 

This will tell your #someInheritedDiv to apply the same styles as div.someBaseDiv has. Then you extend this set of styles with more specific to your #someInheritedDiv:

#someInheritedDiv {     background-image:url("images/worldsource/customBackground.gif");     background-repeat:no-repeat;     width:950px;     height:572px; } 

This is how specificity in CSS works.

Answer 2

Use both classes and combine them like so:

.baseClass {     margin-top:3px;     margin-left:auto;     margin-right:auto;     margin-bottom:0px; }  .baseClass.otherClass /* this means the element has both baseClass and otherClass */ {     background-image:url("images/worldsource/customBackground.gif");     background-repeat:no-repeat;     width:950px;     height:572px; } 

The markup is as follows:

<div class="baseClass otherClass"></div> 

Now, in this fashion you can override baseClass if necessary... and since you don't have to keep adding your new class names to the baseClass definition, it's a bit cleaner.