Specificity management

Learn specificity calculation and management.

How is specificity calculated?

Specificity is a triple that marks a selector's power level: (a, b, c). Here a counts ids, b counts classes and attributes, c counts type selectors. The higher column wins first: (1, 0, 0) beats (0, 5, 5).

Example: #main .card h2 has specificity (1, 1, 1) — one id, one class, one type. .card h2 has (0, 1, 1). Adding an id bumps a, not b, so a single id outranks any number of classes.

!important and its risks

Adding !important to a declaration makes it win regardless of specificity. The form: color: red !important; — exclamation, space, the word important. It looks tempting but is not a real fix.

The reason is simple: once you add !important, overriding it later needs another !important with higher specificity. Soon the file turns into a pile of !important flags and tracing which declaration wins becomes impossible. Manage specificity first.

Strategies to lower specificity

High specificity makes later changes hard. Ways to keep it low: prefer classes over ids, replace type selectors with classes, avoid nested selectors. Writing .card-title instead of #main .card h2 drops specificity from (1, 1, 1) to (0, 1, 0).

Naming methods like BEM make this easy: each class is a flat class, no nesting, specificity stays at (0, 1, 0). Reuse also improves; the same class works inside another block.

Exercise Simplify the complex selector

Replace the high-specificity selector with a lower-specificity BEM class. Add a new .card__title class selector and put font-size: 1.5rem and color: navy inside it. Add nothing else.

Show example solution

/* write a BEM class instead of #main .card h2 { color: navy; } */
.card__title {
  font-size: 1.5rem;
  color: navy;
}

Test yourself

Which selector has the highest specificity?
```
#nav .menu a
.menu .item a
div nav a
#nav ul li.active
```
- #nav .menu a
- .menu .item a
- div nav a
- #nav ul li.active
Show answer

#nav ul li.active — Correct. #nav ul li.active has specificity (1, 1, 2); the last column's 2 beats the other (1,1,1).

Strengthen the declaration with !important

.alert {
  color: red;
  font-weight: bold ____
}

Show answer

.alert {
  color: red;
  font-weight: bold !important;
}

Match each selector to its specificity

#main

(1, 0, 0)
.card .title

(0, 2, 0)
nav ul li

(0, 0, 3)
#nav .item a

(1, 1, 1)

Next lesson: Cascade layers

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies