Want to override child element css property by parent element

Question

In CSS, "child" class has its o

Answer 1

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

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

Answer 2

You could override the CSS using jQuery, although it's 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 a jsfiddle: link

Answer 3

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

Use !important only if nothing else works.