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

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.


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.

Tags:

Css