Overwrite! An important rule set in a media query ?! Not important?

Question

Imagine...

@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 a way to overwrite or “delete” the !important declaration so that it is not yet applied at a higher min-width value?

Answer 1

No; how the cascade works, there is no way to cancel the !important declaration or make it "immaterial".

This is regardless of whether the rule is executed in different @media rules or elsewhere in the stylesheet. This means that it is the same as if you had no media queries related to it:

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

Which, by the way, is what the browser really sees if both min-width: 55.5em and min-width: 61.5em .

You are much better off finding a way to remove this !important and use a more specific selector in your first @media .