How to override inline styles in a child div?

Question

I have two divs 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;
}

Yes, that's correct. But when I inspect, the style is not from the class, its getting injected (Inline) from somewhere, don't know where. But my requirement is, I want to make that style="height: 30px" as 100 PX. — Jasmine, Jul 05 '16 at 23:36
@dippas: thank you very much for asking, I am afraid no where in my CSS I have such 30 specification for height. It is not from a class, it is rather inline when I inspect and see — Jasmine, Jul 05 '16 at 23:37

score 1 · Accepted Answer · edited May 23 '17 at 12:32

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.

How to override inline styles in a child div?

1 Answers1