Css !important

Question

How can I change a tag property in css if in html the property is written with “!important” inline?

Answer 1

By indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

If your HTML has inline css styling with
"!important" and you want control, remove the "!important".

E.g. -

External css file has this

.myfontstyle {
font-size:2em;
font-weight:bold;
color:#fff;}

Inline style has this

<p style="font-size:1em!important ;">some text</p>

Your paragraph text will be 1em.

The !important attribute takes higher priority.

Removing it, you can use a class in your external css stylesheet to style the paragraph as you want.

<p class="myfontstyle">some text</p>

Your font size should now be 2em.

But if some parent element takes control of your font size and your external css font-size of 2em does not work, you can add the
!important attribute to font-size in external css to take back control.

.myfontstyle {
font-size:2em!important ;
font-weight:bold;
color:#fff;}

Your font size will be 2em now if the paragraph element <p> had inherited a different font size from a parent element .

Hope that makes sense. Sounds tricky when I read it back.

Answer 3

thank you Xyenia

Answer 4

Based on specificity, that's exactly high as you can go. So you have to modify the html file

http://www.standardista.com/css3/css-specificity/?sa=X&ved=2ahUKEwjso5qa_qjlAhXJp48KHQoZAmgQ9QF6BAgLEAI

Answer 5

inline !important has highest value I need some hack for resolve this