CODEWITHSUNDEEP
css
abcdefg4321
abcdefg4321

Reputation: 63

!important is not overriding inline CSS

I have some inline CSS I can't change

<span style = "color: #404040; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; line-height: 17px;">

stuff

</span>

and it is overriding my external CSS. I tried putting !important

.product-description 
{
  font-family:wide latin !important;
}

but it had no effect

If I go to inspect element and delete the style attribute, my external CSS works

Upvotes: 6

Views: 4595

Answers (1)

hungerstar
hungerstar

Reputation: 21715

Update 1

OP mentioned they only have access to the CSS file.

In this case, you will need to change your CSS selector up a bit but is still doable. The example below has the class applied to the parent element of an element you'd like to change.

.change p {
  color: pink !important;
}
<div class="change">
  <p style="color: blue;">
    This is some text.
  </p>
</div>

You might have to get even more specific with your CSS selector if there are a lot of child elements to wade through when you hook into a CSS class selector. Try to hook into the CSS class selector that is the closest to the element you want to target.

.change div p:nth-child(2) {
  color: pink !important;
}
<div class="change">

  <p style="color: blue;">
    This is some text.
  </p>

  <div>

    <p style="color: green;">
      This is some text.
    </p>

    <p style="color: orange;">
      This is some text. (only change me)
    </p>

  </div>

</div>

Original Answer

My guess is that you're not applying the CSS class directly to the element you want changed as I do not see .product-description being applied to the example <span>.

Look at the two examples below.

  1. I think you're attempting this one, class applied to outer element of the element you want changed. <p> would inherit the color of .change if <p> didn't have something with a higher specificity applied to it, like inline CSS or another CSS class.

  2. Here we apply the class directly to the element we want changed, that way the specificity of !important can override the specificity of the inline CSS.

.change {
  color: pink !important;
}
<!-- #1 -->
<div class="change">
  <p style="color: green;">
    This is some text.
  </p>
</div>

<!-- #2 -->
<div>
  <p class="change" style="color: green;">
    This is some text.
  </p>
</div>

Upvotes: 5

Related Questions