Learner Learner - 4 months ago 19
CSS Question

How to override inline styles in a child div?

I have two

div
s like below

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


Now in the
child
div, I see a style called
height
with some pixels when I inspect it. I am surprised how its not applied to the parent
div
.

I want to override the style to
100px
from its
30px
.

My application is an angular and css3 html5, web api mvc based app.

How to do it?

I tried this

div[style] {
height: 100px;
}

Answer

If you say that inline style is being inserted dynamically and you don't know how you can't change (you really should debug till you find out how is being inserted) then to be more specific than inline styling, only using !important

NOTE this is one of the extreme cases that !important should be used. Otherwise AVOID IT

.child {
  background: red;
  height: 100px !important;
  width: 100px
}
<div class="parent">
  <div class="child" style="height: 30px">
  </div>
</div>

You can see an answer of mine here with more details regarding this subject.

Comments