Override inline CSS from CSS file without !important

Question

I have an angular component, that generates inline style attributes in the resulting HTML.

Example :

<my-component></my-component>

The HTML of that component is:

<div id="my_component" class="class_1" style="width: 40px; height: 40px;"></div>

Is there a way to override the width/height of my_component from external CSS file? I tried many selectors, I'm always getting overridden by the inline style...

!important is working, but I would like to know if there is another way than use !important.

No. It looks like you have things back-to-front. You are trying to override inline css with a css file. Normally you would override a css file with inline css. Consider restructuring your css. Otherwise you will have to use !important. — Kev
– Kev, Commented Dec 19, 2018 at 15:22

Temani Afif · Accepted Answer · 2018-12-19 16:09:20Z

12

If we think about this differently considering that you want to override width/height then yes you can do it with min-width/min-height:

#my_component {
  min-width:200px;
  min-height:200px;
  background:red;
}

<div id="my_component" class="class_1" style="width: 40px; height: 40px;"></div>

And to be more accurate you can add the max-* version to be sure you have a fixed height/width:

#my_component {
  min-width:200px;
  min-height:200px;
  max-width:200px;
  max-height:200px;
  background:red;
}

<div id="my_component" class="class_1" style="width: 40px; height: 40px;"></div>

answered Dec 19, 2018 at 16:09

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jax Teller Over a year ago

wow, i didn't expect real good answer by asking my question, but your answer is perfect for my case! thanks

Quentin · Accepted Answer · 2018-12-19 15:20:05Z

3

No.

The only way to override a CSS rule without using !important is to use a more specific selector.

No selector is more specific than the style attribute.

answered Dec 19, 2018 at 15:20

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

hungerstar · Accepted Answer · 2018-12-19 15:23:40Z

2

CSS Specificity works in a hierarchy

!important overrides
Inline Styles
ID's - HTML: id="blah", CSS: #blah
Classes - HTML: class="foo", CSS: .foo
Elements and pseudo-elements (:before, :after).

you can read more on it here

but as others have said, in short, no.

edited Dec 19, 2018 at 15:23

hungerstar

21.8k6 gold badges52 silver badges63 bronze badges

answered Dec 19, 2018 at 15:21

Dan Scott

5644 silver badges10 bronze badges

3 Comments

Sebastian Speitel Over a year ago

Just curious, where does order fit in there?

hungerstar Over a year ago

Are you referring to the cascade?

Salman Arshad Over a year ago

@sebastian order as in source order? order is used to break ties if Specificity matches.

James Long · Accepted Answer · 2018-12-19 15:42:48Z

1

There used to be a bug where a selector containing 256 would override an id. There may be some upper limit to the counter and going over that would cause an override to the next value (a selector of 256 ids would override an inline style).

I think the 256 classes bug was fixed and I don't know whether this was done by increasing the necessary number of classes or putting in place something to prevent it ever happening again.

From a purely academic perspective, it may be possible to override an inline style without using !important but it would be more of a a bug exploit as opposed to part of the spec / a good idea.

answered Dec 19, 2018 at 15:42

James Long

4,7581 gold badge22 silver badges31 bronze badges

Collectives™ on Stack Overflow

Override inline CSS from CSS file without !important

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related