When to use "!important" to save the day (when working with CSS)

css

Solution

Consider this:

#someElement p {
    color: blue;
}

p.awesome {
    color: red;
}

How do you make `awesome` paragraphs always turn red, even ones inside `#someElement`? Without `!important`, the first rule will have more specificity and will win over the second rule.

Problem

``` #div p { color: red !important; } ... #div p { color: blue; } ``` I understand how `!important` works, in this case the div will render red because now it has priority (!important). But I can't still figure out an appropriate situation to use it. Does anybody know any example where `!important` saves the day?

Original source

Related problems