CODEWITHSUNDEEP
htmlcss
stairwaytoeve
stairwaytoeve

Reputation: 336

How can I override !important inline css?

I'm editing a page and I can't change the html, only the css, but I need to change a background-image that is declared inline with !important. I've already tried to declare background-image: none !important; or change bg position until it disappear and then declare the new bg image on :before pseudo-element, but it doesn't work. Is there any way to do this WITHOUT change the html? Here's the code:

<ul class="list-inline">
    <li>
       <a href="http://www.facebook.com/portoseguro" target="_blank">
         <span class="gIconSocial fb" style="background: url('https://cliente.portoseguro.com.br/static-files/Institucional/Icones/facebook_off.png') no-repeat !important;">Facebook</span>
        </a>
    </li>
</ul>

(I can't use javascript too, only css)

Upvotes: 0

Views: 1982

Answers (2)

Saiyaff Farouk
Saiyaff Farouk

Reputation: 5633

The browser gives the priority to the inline style. And, since this is with !important property you have to edit the HTML to get rid of this if you wanna do this with CSS only.

I recommend you to read more about Specificity on applying styles

Upvotes: 2

Mouradif
Mouradif

Reputation: 2704

You can hide the background image by adding the CSS background-size: 0; and try to put a background image to ul.list-inline > li > a[target=_blank]

EDIT :

rather use ul.list-inline > li > a[target] or it wont work

Upvotes: 1

Related Questions