Search code examples
cssmedia-queries

Overwrite !important rule set within media-query? !unimportant?

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?

Solution

  • 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.