Specificity

Specificity is calculated by adding up points based on the types of selectors in a rule. Points are divided into four levels.

The universal selector (*), combinators (+, >, ~), and the negation pseudo-class (:not()) itself carry no points. However, selectors inside :not() do count toward specificity.

Levels are compared in order from A to D. Level B is only compared when A is equal, C is only compared when both A and B are equal, and so on. No amount of level D points can ever outweigh a single level C point.

Some articles and textbooks explain specificity using decimal numbers, such as "ID selectors are worth 100 points, class selectors are worth 10 points." This is not accurate. Each level of specificity is independent, and no amount of lower-level points can ever outweigh a single point in a higher level.

Consider the following example, which compares one ID selector against eleven chained class selectors.

style.css

/* Specificity: 0,1,0,0 */
#yagami {
	color: red;
}

/* Specificity: 0,0,11,0 (even 11 classes cannot beat one ID) */
.a.b.c.d.e.f.g.h.i.j.k {
	color: blue;
}

index.html

<div id="yagami" class="a b c d e f g h i j k">Iori Yagami</div>

If specificity were calculated as decimal numbers, 11 classes (10 × 11 = 110) should beat one ID (100). But the text is red, meaning the ID selector won. This is because specificity levels never carry over. The ID selector's '0,1,0,0' always outranks '0,0,11,0' — no matter how many classes are chained together.

This system is similar to semantic versioning used in software (e.g., version '2.0.0' is always newer than '1.99.99'). The higher level always takes priority, regardless of the lower-level numbers.

When multiple selectors target the same element, the selector with the highest specificity wins.

style.css

/* Specificity: 0,0,0,1 */
p {
	color: blue;
}

/* Specificity: 0,0,1,0 (class selector is higher than type selector) */
.fighter-name {
	color: crimson;
}

/* Specificity: 0,1,0,0 (ID selector is higher than class selector) */
#yagami {
	color: purple;
}

index.html

<p>This paragraph is blue</p>
<p class="fighter-name">Kusanagi Kyo</p>
<p class="fighter-name" id="yagami">Iori Yagami</p>

"Iori Yagami" matches three rules: p (blue), .fighter-name (crimson), and #yagami (purple). Since the ID selector has the highest specificity, purple is applied.

A declaration marked with !important overrides all specificity calculations and takes the highest priority.

#yagami {
	color: purple;
}

.fighter-name {
	color: crimson !important;
}

In the example above, the ID selector (#yagami) has higher specificity, but because .fighter-name has !important, crimson is applied instead.

When two !important declarations conflict, normal specificity rules apply between them.

#yagami {
	color: purple !important;
}

.fighter-name {
	color: crimson !important;
}

Since both have !important, the ID selector's higher specificity wins, and purple is applied.

The :root pseudo-class targets the html element, but because it is a pseudo-class, it falls under level C. While html as a type selector has a specificity of 0,0,0,1, :root has a specificity of 0,0,1,0.

This property can be used to raise a selector's specificity without resorting to !important.

/* Specificity: 0,0,1,0 */
.fighter-name {
	color: crimson;
}

/* Specificity: 0,0,2,0 (:root boosts it above a single class) */
:root .fighter-name {
	color: blue;
}

:root .fighter-name has a specificity of 0,0,2,0, which outranks the standalone .fighter-name at 0,0,1,0. This technique is useful for overriding styles from external CSS libraries or other developers' code without relying on !important.

For even higher specificity, :root can be stacked.

/* Specificity: 0,0,3,0 */
:root:root .fighter-name {
	color: blue;
}

Stacking two :root pseudo-classes yields a specificity of 0,0,3,0. This allows you to incrementally raise specificity without using ID selectors, making it a useful step before reaching for !important.

When competing selectors have exactly the same specificity, the rule that appears later in the CSS file takes precedence.

.fighter-name {
	color: crimson;
}

.fighter-name {
	color: blue;
}

Both have a specificity of 0,0,1,0, but since the second rule appears later, blue is applied. This mechanism is called the "cascade", and it is the origin of the name CSS (Cascading Style Sheets).

Overusing !important

!important is a convenient way to resolve style conflicts, but overusing it leads to a situation where styles can only be overridden with more !important declarations, making CSS maintenance difficult.

.fighter-name {
	color: crimson !important;
}

/* Cannot override because the above rule has !important */
#yagami .fighter-name {
	color: purple;
}

In the example above, even though #yagami .fighter-name has a higher specificity (0,1,1,0), it cannot override the !important crimson. Using higher-specificity selectors to resolve conflicts is a healthier CSS design approach.

Overlooking ID Selector Specificity

ID selectors have very high specificity, so attempting to override them with class selectors alone will not work.

/* Specificity: 0,1,0,0 */
#yagami {
	background-color: #2c0033;
}

/* Specificity: 0,0,3,0 (even three classes cannot beat one ID) */
.team .roster .fighter-name {
	background-color: #ffffff;
}

No matter how many class selectors are chained together, they cannot outweigh an ID selector (level B). To override a rule that uses an ID selector, you must include the same ID selector or use !important.

CSS specificity is a fundamental part of the CSS specification, and all browsers that support CSS apply the same calculation rules.

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

IE

6+ ○

Opera

3.5+ ○

Mobile

iOS Safari

1+ ○

Android Browser

2.1+ ○

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data based on MDN.