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

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

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

Solution 3:

For this task, I would recommend you use a powerful extension of CSS called LESS. It compiles into CSS or can be used on-the-fly with a javascript file as the link explains.

LESS supports inheritance (almost) as you describe. The documentation has the details (see the section "Mixins").

For your example, the LESS code would be:

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

someInheritedDiv {
    .someBaseDiv;

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

Note that it would have to be .someBaseDiv and not div.someBaseDiv

Solution 4:

What you want to do is make some CSS apply to two different types of elements, but allow them to have some differences as well. You can do this using some simple HTML:

<div class="base">
    <div class"inherited">
    </div>
</div>

And CSS:

.base, .inherited{
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
}

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

This will add the shared properties to both types of div, but specific ones only to derived divs

Solution 5:

If you want all the inner DIVs with a specific class to inherit from the base class build the HTML markup like this:

<div class="parent">
    <div class="child">X</div>
</div>

And the CSS

.parent { border: 2px solid red; color: white }
.parent .child { background: black }

If all DIVs must inherit change .child to div.

See this example on jsFiddle

The following code

// parent     // all DIVs inside the parent
.someClass    div { }

Means: A top element (any) with the class someClass will add the styles to all its children DIVs (recursively).