CSS: !important

By Xah Lee. Date: .

The !important keyword

the !important has highest cascade priority.

when two rules are both !important, the one with higher specificity or later in the cascade, wins.

p {
 color: red !important;
}

/* beats everything below */

#id8383 .xclass p {
 color: blue;
}

The priority of !important

  1. (lowest),User-agent normal
  2. User normal
  3. Author normal
  4. Animations
  5. Author !important
  6. User !important
  7. User-agent !important
  8. (highest),Transitions

Normal declarations follow the usual order:

  1. user-agent.
  2. user
  3. author
!important reverses that:
  1. author important.
  2. user important
  3. user-agent important

An author !important declaration beats any normal declaration (including more specific ones or later ones), but loses to user or user-agent !important declarations.

Within the same origin + importance level, the rest of the cascade still applies:

🛑 WARNING: do not use the !important, because it makes your CSS hard to maintain once you have more than one.

CSS cascade and scope