How to remove all the inline styles on parent Element with the help of child element in css?

user_13975105 0
Viewed 133

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;
}
css html javascript
1 Answers

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>

user_108674540
Related