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?

You may be confusing inhertiance with the "someInhertedDiv". As stated, not all properties are inherited, only some, such as color, font-size, font-weight etc. You may have HTML as "<div id="parent">I am a parent<div id="child">I am a child</div></div>" and CSS as "div#parent{color: blue;}", Now the div#child will also have color blue. That is CSS inheritance at work. — Jawad
– Jawad, Commented Jun 16, 2011 at 19:06

Massimiliano Kraus · Accepted Answer · 2017-10-24 13:24:20Z

78

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.

edited Oct 24, 2017 at 13:24

Massimiliano Kraus

3,8925 gold badges32 silver badges51 bronze badges

answered Jun 16, 2011 at 20:05

spliter

12.6k4 gold badges36 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

canon · Accepted Answer · 2011-06-16 21:04:49Z

29

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.

edited Jun 16, 2011 at 21:04

answered Jun 16, 2011 at 19:01

canon

41.9k10 gold badges77 silver badges102 bronze badges

2 Comments

Vincent Nov 20 at 10:50

Q: why in div class="baseClass otherClass" is not enough to specify only otherClass? Inheritance means we don't bother anymore w baseClass name.

canon 2 days ago

It's not true inheritance.

pfnuesel · Accepted Answer · 2016-02-21 05:12:30Z

14

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

edited Feb 21, 2016 at 5:12

pfnuesel

15.5k14 gold badges63 silver badges74 bronze badges

answered Jun 16, 2011 at 18:57

Alan Turing

12.7k16 gold badges78 silver badges117 bronze badges

1 Comment

spliter Over a year ago

Just a note – LESS is not an extension of CSS at all. It's a pre-processor written in Javascript.

Kyle Sletten · Accepted Answer · 2011-06-16 18:57:45Z

7

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

answered Jun 16, 2011 at 18:57

Kyle Sletten

5,4333 gold badges28 silver badges39 bronze badges

1 Comment

Vincent Nov 20 at 9:53

You cannot know what user wants. Task is simple - INHERIT STYLE, not more, not less. Please answer on direct question, don't put here your fantasy.

pfnuesel · Accepted Answer · 2016-02-21 05:12:47Z

3

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;
}

edited Feb 21, 2016 at 5:12

pfnuesel

15.5k14 gold badges63 silver badges74 bronze badges

answered Jun 16, 2011 at 18:56

Niklas

30k5 gold badges54 silver badges74 bronze badges

1 Comment

Vincent Nov 20 at 9:54

Tikhon didn't say anything about CHILD elements! It's only about INHERIT style.

BrunoLM · Accepted Answer · 2011-06-16 19:14:54Z

2

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

answered Jun 16, 2011 at 19:14

BrunoLM

101k86 gold badges311 silver badges464 bronze badges

1 Comment

Vincent Nov 20 at 9:55

Where you found idea about "inner DIV"?? It's only about INHERIT STYLE.

norman.lol · Accepted Answer · 2025-11-14 17:29:23Z

There is a way to do this with JS getComputedStyle() and CSS variables. Here for example I needed to have a <div> inside a <pre> code block dynamically inherit the <body> font instead of having the monospace font that comes with <pre> elements:

// Get the computed style value.
const bodyFont = getComputedStyle(document.body).fontFamily || 'inherit';

// Make it globally available as CSS variable.
document.documentElement.style.setProperty('--inherit-body-font', bodyFont);

Now in CSS I could set the font like this:

.my-div {
  font-family: var(--inherit-body-font);
}

This even works when the font-family has not been set explicitly on the <bod> tag, but even when the <body> tag itself inherits the font-family for example from <html>.

Collectives™ on Stack Overflow

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

7 Answers 7

Comments

2 Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

2 Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related