CSS Concepts to Know: Specificity

Everything you need to know about Specificity in CSS

Specificity

Suppose that you’re working with the following HTML and CSS:

// HTML
<button class="btn-base">Submit</button>
// CSS
button {
  color: green;
}
.btn-base {
  color: white;
}

There’s two competing rules here, each applies a color to the button, but which rule gets applied to the element?

Specificity is a scoring system applied to CSS selectors that helps us understand how CSS decides which rule gets applied when there are competing rules.

How does specificity scoring work?

Each CSS selector gets a score and the selector with the highest score wins.

In the real world you generally want to keep specificity low to prevent complexity. Scores should only be as high as they need to be, using unnecessarily high scores can make applying more important CSS in the future quite hard.

How are individual selectors scored?

One of the best ways to illustrate specificity scoring is to show a bunch of examples. We’ll cover all the different types of selectors and each of their scores below:

Universal selector

The universal selector (*) has no specificity and gets 0 points.

* {
  color: white;
}

Element and psuedo-element selector

Element and psuedo-element selectors get 1 point of specificity.

button {
  color: white;
}
::before {
  color: white;
}

Class, psuedo-class, and attribute selector

Class, pseudo-class, and attribute selectors get 10 points of specificity.

.class {
  color: white;
}
:checked {
  color: white;
}
[href] {
  color: white;
}

ID selector

The ID selector gets 100 points of specificity.

#id {
  color: white;
}

Inline style attribute

Styles applied via the inline style attribute get a specificity score of 1,000 points.

<button style="color: red">Submit</button>

!important keyword

The !important keyword in CSS gets a specificity score of 10,000 points. This is the highest specificity that one individual item can get.

The !important keyword is applied to properties, everything in the selector does not get the same 10,000 specificity score.

.class {
  color: white !important; /* 10,000 points */
  background-color: black; /* 10 points */
}

Specificity Examples

To solidify our understanding of specificity, it’s best to practice with a few examples below.

Do your best to determine the specificity score for each of the selectors below. Answers are posted below

1. a.classOne.classTwo { ... }
2. a#idOne > li { ... }
3. ::after > * { ... }
4. [href="www.example.com]:visited { ... }
5. div:not(.classOne) { ... }
6. ul > li > span > a:visited { ... }
7. button.btn-base.btn-base { ... }

Answers:

1. 21 points
2. 102 points
3. 1 point
4. 20 points
5. 11 points — the :not() psuedo-class adds nothing to the specificity calculation itself. However, the selectors passed in as arguments do get added to the specificity calculation
6. 14 points
7. 21 points — repeating the selector adds additional points to the specificity score

Specificity Hack: Boosting the Score

If you want to give any selector a boost in its specificity score, you can repeat the selector like this:

.my-button.my-button.my-button.my-button {
  color: blue;
}

The new selector gets a specificity of 40 points because the class is repeated 4 times.

What happens when the specificity score is the same?

The CSS rule defined last in the style sheet wins. For example, the following CSS would apply a green background to the button because the specificity of the two selectors match (10 points) and the rule defined last specifies a green background color.

.btn-base {
  background-color: blue;
}
[type="submit"] {
  background-color: green;
}

Additional Resources:

• Specificity Calculator