Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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?

Problem courtesy of: matt

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.

Solution courtesy of: BoltClock

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×