Want to override child element css property by parent element

Question

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

In CSS, "child" class has its own bg color, that I can't change. I want to apply "parent" class bg color to container. So, Is there any CSS trick to override "child" bg color by "parent" bg color.

Any help would be much appreciated.

Answer 1

!important will override any inline background color applied, 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 else works.