Suggest an edit

Improve this article

Refine the answer for “How does !important affect specificity?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`!important` **does not increase a selector's specificity**, but **overrides the cascade's result** by placing itself at the very top of the priority list. In other words, it is not about the selector's "weight", but about the rule's "strength".

---

### **How priority works with** `!important`

In effect, `!important` creates a separate, highest level, above specificity. The order in which rules are applied becomes:

1. `!important`
2. inline styles
3. `id` selector
4. class, attribute, pseudo-class selector
5. tag selector
6. browser styles

---

### **Example**

```css
p { color: blue !important; }
#text { color: red; }
```

Although `#text` has higher specificity, the final color will be **blue**, because the first rule has `!important`.

---

### **When** `!important` **still loses**

Only in one case, if there is **another** `!important` **with a higher-weight selector**:

```css
p { color: blue !important; }
#text { color: red !important; }
```

Here **red** will win, because with equal `!important`, specificity takes over again, `id` is stronger than `p`.

---

### **Summary**

- `!important` **does not change specificity**
- but **affects the final priority**, bypassing the cascade and the selector's "weight"
- when two `!important` rules conflict, the comparison again goes by selector specificity

This mechanism makes `!important` a "cheat code", which is why it is avoided in regular development.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts216 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.