2

Imagine this … 

@media screen and (min-width: 55.5em) {
    aside[role="attend"] {
        margin:0 !important;
    }
}

@media screen and (min-width: 61.5em) {
    aside[role="attend"] {
        margin:0; /* still !important but shouldn't be */
    }
}

Is there any way to overwrite or "remove" the !important declaration so it's not still applied within the higher min-width value?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
matt
  • 42,713
  • 103
  • 264
  • 397
  • 4
    Yeah, don't use `!important` so it does not need to be overwritten. It is way overused by people who generally are not understanding how css works. Not really an answer, hence a comment. – ScottS Jul 24 '12 at 21:28
  • 1
    BTW--I did not mean by my previous comment to imply you do not know how css works. However, I did mean to imply that if possible, remove the offending `!important` by reconfiguring that selector or other css. – ScottS Jul 24 '12 at 21:33

1 Answers1

3

No; the way the cascade works, there is no way to undo an !important declaration or make it "unimportant".

This is regardless of whether the rule occurs within different @media rules or anywhere else in a stylesheet. That means it's the same as though you didn't have the media queries there to begin with:

aside[role="attend"] {
    margin:0 !important;
}

aside[role="attend"] {
    margin:0;
}

Which, incidentally, is what a browser actually sees if both the min-width: 55.5em and min-width: 61.5em media queries are fulfilled.

You're much better off finding a way to remove that !important and using a more specific selector in your first @media rule instead.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356