0

I have a situation where the .css in my head tag is getting overridden by css that's being inserted dynamically into the head by a javascript library.

The .js library automatically appends the new .css link to the end of the head tag so it is always put on top of my styles.

JLeonard
  • 8,520
  • 7
  • 36
  • 36
  • 1
    Have you tried adding !important to the CSS declarations where the javascript is overriding? http://webdesign.about.com/od/css/f/blcssfaqimportn.htm – MRR0GERS Oct 07 '10 at 21:02
  • Having to add "!important" all over the place is a really sad hack. To me this calls for a search for a better library. Either that, or accept what the library does and style your pages to "get along". – Pointy Oct 07 '10 at 21:11

1 Answers1

2

You have several options:

  1. Use a different JavaScript library
  2. Make sure all your rules have a higher specificity than the ones added by the library
  3. Learn about !important
robertc
  • 74,533
  • 18
  • 193
  • 177
  • +1 a quick note : CSS being added to the end of head, or added later by javascript doesn't cause it to be put 'on top of' other stylesheets. Style is applied according to specificity of the selector.. – Ravindra Sane Oct 07 '10 at 21:33
  • 1
    Another option is using the `[style]` rule in your CSS, where `` is any selector, as detailed on [CSS Tricks](http://css-tricks.com/override-inline-styles-with-css/) and discussed in [this question](https://stackoverflow.com/q/11281633/604687). – Ninjakannon Mar 13 '15 at 18:53