CSS !important
The nuclear option for overriding styles.
1Using !important
Adding !important to a property ignores specificity rules. Use carefully!
p {
color: red !important;
}
/* This won't work even if it has an ID */
#my-p {
color: blue;
}2Understand it in a real interface
The important flag changes a declaration’s priority, but does not make the entire selector universally unbeatable. Important declarations can still compete with other important declarations. Frequent use can conceal an unclear style architecture and make a small component unexpectedly difficult to customize.
3Try it yourself
Create two color rules for the same element and add the flag to one declaration. Inspect the winning rule, then remove the flag and reorganize the selectors or order to express the same intention. Reserve a documented exception only when the underlying conflict cannot be resolved cleanly.
Finished reading?
Mark this topic as complete to track progress.