Injection new stylesheet rules

Question

I am using some javascript on my page to put some addons on page, but javascript add some css styles and those new css styles override existing css styles on page.

Is there a way to disable new css styles. I know I can use javascript to delete new created css rules, but I dont want to use javascript. Is it posible?

Thanks

Answer 1

You can try to raise the priority of your css rules by some simply tricks.

For example, you can give an id attribute to your most external container element in the html, for example id="yourContainerId". Then you can raise the priority of your css classes by prepending #yourContainerId to all your classes that you want to raise:

#yourContainerId .yourClass1 {

}

#yourContainerId .yourClass2 {

}

etc..

if you want to know more about css priority, this is a good resource: http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector

Note: this trick cannot work in some particular conditions, because if your javascript writes inline style on your html elements there is nothing to do, you can only remove them with js. Tell me if you need a jsFiddle example

Answer 2

Just look at this css path and do the next code:

 $("rel").each(function(){
      if($(this).attr("href")=="insert you path here"){
        $(this).attr("disabled", "disabled");
       }
    });