I am working on one angular project, where I want to remove the parent element styling with the help of child element, because the child element is on condition based. Note parent element is having inline styling
my code is something like this
<form style="background-color: red; padding: 5px"
class="my-form">
<div>
<div>
<button class="my-btn">click me</button>
</div>
</div>
css
.my-btn {
color: #fff;
background-color: #000;
border: none;
outline: none;
padding: 5px 12px;
cursor: pointer;
}
While a child element cannot directly influence the styling of a parent there are some things you can do, but whether these ideas are useful depends on exactly what you want to do.
Taking the code given in the question it is possible to make it look as though the background color of the form has been changed by putting a pseudo element on the btn which is positioned absolutely and sized relative to the form, not to the btn. CSS variables can be set on the btn element and then picked up by its pseudo element, as the background color is here for example.
.my-form {
position: relative;
display: inline-block;
z-index: -2;
}
.my-btn {
color: #fff;
background-color: #000;
border: none;
outline: none;
padding: 5px 12px;
cursor: pointer;
}
.my-btn::before {
content: '';
background-color: var(--bg);
display: inline-block;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
}<form style="background-color: red; padding: 5px" class="my-form">
<div>
<div>
<button class="my-btn" style="--bg: blue;">click me</button>
</div>
</div>