1

I have an element with inline styles, which are set with JavaScript:

<div class="foo" style="top: 30px;">

I am forced to use an unchangeable CSS file that contains styles to override the inline styles:

.foo { top: 0 !important; }

Is there a way to force the element to use the inline styles instead of the !important styles defined in the CSS file?

j08691
  • 204,283
  • 31
  • 260
  • 272
Brad
  • 95
  • 2
  • 9

2 Answers2

1

Put !important on the inline style also:

<div class="foo" style="top: 30px !important;">
Jamie Treworgy
  • 23,934
  • 8
  • 76
  • 119
0

This question was well answered. Here's the link to another stack question.

Let me begin by saying that generally inline styles can be overridden:

.override {color:red !important;}​

<p style="color:blue;">I will be blue</p>
<p style="color:blue;" class="override">But I will be red</p>

This behavior is described in W3 specs, where it is stated that !important declarations do not alter the specificity, but rather take precedence over "normal" declarations.

That being said, when conflicting rules both have the !important flag, specificity dictates that an inline rule is applied - meaning that for OP's scenario, there's no way to override an inline !important.

Community
  • 1
  • 1
Danielson
  • 88
  • 1
  • 8