Want to override the css property of the child by the parent

Question

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

In CSS, the "child" class has its own bg color, which I cannot change. I want to apply the bg color class in the parent class. So, is there any CSS trick to override the color of "child" bg with the color of "parent" bg.

Any help would be greatly appreciated.

thanks

Answer 1

! important will override any inline background color let me know if this works

 .parent > .child { background-color: transparent !important; } 

Answer 2

 .parent .child { background-color: inherit !important; // can also use "transparent" } 

Use !important only if nothing works.

Answer 3

You can override CSS with jQuery, although it is inelegant. So if you have HTML

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

and CSS:

 .parent { width: 100px; height: 100px; background: red; } .child { width: 50px; height: 50px; background: blue; } 

this jQuery will find the parent background color and apply it to the child:

 $('.child').on('click', function(event) { var bg = $(this).parent().css("background-color"); // finds background color of parent $(this).css("background-color", bg); // applies background color to child }); 

Here's jsfiddle: link