Suggest an edit

Improve this article

Refine the answer for “What does the term "specificity" mean in CSS?”. 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)

Specificity in CSS is a **system of "weights"** by which the browser determines which rule is more important when two or more rules match and try to change the same property on the same element.

Put simply: specificity is **how precise the selector is**. The more precisely a rule targets an element, the higher its priority.

---

### **How specificity is calculated (by levels)**

From higher weight to lower:

1. **ID selectors** (`#header`)
2. **Classes, attributes, pseudo-classes** (`.block`, `[type="text"]`, `:hover`)
3. **Tag selectors and pseudo-elements** (`div`, `p`, `::before`)

Inline styles formally rank even above all selectors, but are usually not included in the specificity calculation. And `!important` sits entirely outside this system and overrides everything.

---

### **Comparison example**

```css
p { color: blue; }          /* tag, low weight */
.text { color: green; }     /* class, higher */
#main { color: red; }       /* id, highest */
```

The final color will be `red`, if all selectors apply to the same element.

---

### **When specificity decides the outcome**

If two rules are equal in level, then **order in the code** takes over, the one written last wins.

---

### **Summary**

Specificity is a priority mechanism for CSS selectors. It exists so the browser can unambiguously decide which rule to apply when there are several options.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.