Overriding !important property used in widget stylesheet in the footer

Question

I have a twitter widget which is loaded into the footer of my page. The problem is that it uses !important properties all over the place. And because my stylesheets are all loaded into the head, the widget's style sheets automatically override any of mine.

Do I really have to put a couple of separate styles in the footer of my document, below the widget, to get force this. Or is there a more semantic method?

Answer 1

I would go through and see if there is a way to make your CSS more specific than the selectors used in twitter. The rules of specificity will ensure that your !important styles override the twitter !important styles.

Otherwise, as a last resort and if !important is only used on classes in the Twitter CSS then you could assign an id to anything that is overridden to ensure that your selectors are more specific.

/* your style */
#anti_twitter a.link {
    color: blue !important;
}

/* twitter style */
a.link {
    color: red !important;
}

So using the code above, the links would come out blue.

JSFiddle: http://jsfiddle.net/9T9uk/

Answer 2

<div id="myWrapper">
     <div id="theDefaultId">
       ....
     </div>
</div>

and you can use #myWrapper #theDefaultId { anything: value !important; }

theDefaultId is the id which the twitter widget uses and #myWrapper is an id defined by us.

This should work.