CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nishant Nawarkhede
Nishant Nawarkhede

Reputation: 8400

Inherit all css properties from parent div to child div

My html,

<div id="parent">
    <div id="child">

    </div>

</div>

css looks like,

#parent{
height:100px;
width:200px;
any-aother-property1:something;
any-aother-property2:something;
any-aother-property3:something;
}

Is there is any way to inherit all the properties to child at once , means can I do like,

$('#child').properties= $('#parent').properties

Upvotes: 18

Views: 22510

Answers (6)

cambunctious
cambunctious

Reputation: 9582

If you really want to dynamically inherit all CSS properties given to the parent at runtime, you can do the following.

Caution: This overrides the default value for all properties. Generally speaking, it is wise to assume that defaults are correct until proven otherwise. Some properties are inherit by default and some are not for various reasons. So you probably should only override specific properties that need to be changed.

#child {
    all: inherit;
}

Upvotes: 20

Pranav
Pranav

Reputation: 673

I have added a function in my library, custags.js which will help you doing that.

This is the extendcss() which requires the query selectors of the elements or the other methods to function. You can do this with any type of elements, let it be equals or parent-child.

Here is the working demo:-

const parent = document.querySelector('.parent')
const child = document.querySelector('.child');
Ω('#button').on('click', ()=>{
Ω('document').extendcss(parent, child);
});
.parent{
background-color: teal;
color: yellow;
}
<script src="https://obnoxiousnerd.github.io/custags.js/custags.min.js"></script>
<h1 class = "parent">Parent</h1>
<h1 class = "child">Child</h1>
<button id="button">Give child some css</button>

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Since children inherit most of their parent's styles by default, you can focus on clearing the child's styles rather than setting them equal to the parent's.

In Chrome and Opera, you can do so with one line of code:

$('#child')[0].style.all= 'unset';

This works whether child's CSS properties are in a style sheet or are created dynamically.

To clear dynamically-created CSS only, you can do this in all modern browsers:

$('#child')[0].style.cssText= '';

That will restore the style sheet properties.

The cross-browser solution to your problem may be the following:

var cs= getComputedStyle($('#child')[0]);
for (var i=0 ; i<cs.length; i++) {
  $('#child').css(cs[i], 'inherit');
}

This iterates through all of child's styles, setting them to be inherited from the parent.

You can test each of these methods in different browsers at this Fiddle:

http://jsfiddle.net/9c3sy2eb/7/

Upvotes: 0

wintercounter
wintercounter

Reputation: 7488

Copy inline:

$('#child').get(0).style = $('#parent').get(0).style;

But better if you find a CSS way as stated in the other answers.

UPDATE:

Get all styles:

$('#child').get(0).style = window.getComputedStyle($('#parent').get(0), null);

Upvotes: 2

mike nvck
mike nvck

Reputation: 454

is this enough?

#parent, #parent > div {
    /* your properties */
}

Upvotes: 6

Florin Pop
Florin Pop

Reputation: 5135

As far as I know there is no such a thing but you can always do something like this:

#parent, #child{
    height:100px;
    width:200px;
    any-aother-property1:something;
    any-aother-property2:something;
    any-aother-property3:something;
}

Add both id's to have the same properties.

Upvotes: 1

Related Questions