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

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?

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.

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.

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

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

That really depends on your markup. If your inherited element resides under a div with class someBasDiv, then all child elements of it will automatically inherit those properties.

If however, you want to inherit the someBaseDiv class in any place in your markup, you could just make the element which you want to inherit with, use both of those classes like this:

<div class="someBaseDiv someInheritedDiv">

and your css would be like this:

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

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

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