Question

#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?

Answer 1

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.