0

I wrote a Chrome extension and one of the features is that you can bring up a help panel with a guide to its usage, in the page you're on. This help panel is inserted into the page via JS, and it's CSS is all created via $('#selector_for_help_panel').css({etc}).

This works great, except that on Reddit there's some media="all" CSS rules that are overriding the inline CSS from my JS. I thought only !important overrode inline CSS.

Will !important work here to counter their CSS? Where does media="all" fall in the hierarchy of CSS priority?

temporary_user_name
  • 35,956
  • 47
  • 141
  • 220

1 Answers1

1

Media types and media queries have no effect on the cascade. You can employ all the principles of stylesheet ordering (e.g. user agent vs external vs internal stylesheets and the order in which they are loaded), cascading, and inheritance as normal, including the use of !important.

!important is often advertised as a tool for combating inline styles, but the underlying reason for that is that it elevates whichever declaration it's applied to in the cascade, which allows any declaration outside of inline styles to beat inline styles (in fact, it can actually still be beaten by inline styles if those inline styles themselves have !important). This means all the rules of stylesheet precedence as well as selector specificity still apply, especially when you have !important declarations in different levels in the cascade.

Also see: Relationship between !important and CSS specificity

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • That's what I THOUGHT! But then how/why is it overriding my inline CSS? And aren't you a unicorn? – temporary_user_name May 20 '14 at 01:09
  • @Aerovistae: Edited my answer. My unicorn powers are unfortunately [localized to Meta SE](http://meta.stackexchange.com/users/137537/boltclocks-a-unicorn) now. – BoltClock May 20 '14 at 01:14