How CSS Specificity Works

Knowing how CSS specificity works is a fundamental skill.

It will give you a deeper understanding of how CSS property values are resolved when two or more style rules match the same set of HTML elements.

Troubleshooting your CSS is easier when you can determine the specificity values of your selectors. For example, when there’s a style rule that isn’t working as intended, there’s probably another style rule somewhere that’s overriding it. You’ll be able to quickly correct these issues by learning about CSS specificity.

How It Works

If multiple CSS selectors are targeting the same set of HTML elements, and if the CSS selectors are trying to assign the same property/properties to the HTML elements, the selector with the highest specificity value will “win”.

In other words, the most specific selector gets to assign its property values to the HTML elements.

It’s easier to explain with an example.

Let’s say this is our HTML:

<div class="container">
  <div id="main">
    <p>
      <a href="#">Link</a>
    </p>
  </div>
</div>

We want to assign a color to the <a> tag above.

There are many ways to target that <a> tag using CSS selectors. Below are five style rules that can get the job done:

#main a {
  color: green;
}
p a {
  color: yellow;
}
.container #main a {
  color: pink;
}
div #main p a {
  color: orange;
}
a {
  color: red;
}

Since all five style rules are trying to assign a color property value to the <a> tag, the browser gets confused: Should the link be green, yellow, pink, orange or red?

The browser needs a way to negotiate which color it should give to our <a> tag.

The way the browser makes the decision is by first calculating each selectors’ specificity value. Then it checks which selector has the highest value. That’s the winner. That will be the selector who gets the honor of setting the color property value of our <a> tag.

Here are our five style rules again, in order from most specific to least specific.

So our <a> tag is pink.

If we remove .container #main a from our stylesheet, our link will become orange because the next most specific selector is div #main p a.

How did I know the specificity values for each selector? I calculated them.

Figuring Out Specificity Values

Understanding CSS selector specificity rules will all seem complicated at first.

For example, when I was still learning about CSS specificity, I had to write down my calculations on a piece of paper. Just like back in school when solving math problems.

It will take time and practice before this all becomes second nature.

OK, so let’s actually go over how to calculate a selector’s specificity value.

The method I’ll show you for determining specificity values is from W3C CSS Selectors Level 3 specifications.

The Basics

The specificity value is:

abc

Where:

Example

#header .navbar li a:visited

We’ll go through more examples in just a bit.

Selector Types

Before you can calculate specificity values, you’ll need to be familiar with the types of CSS selectors:

Special Rules

• When calculating CSS specificity values, ignore the universal (*) selector.

  /* Specificity value: 0
   * a=0 b=0 c=0 */
  * { color: black; }

• Only the selector inside the :not() pseudo-class (negation pseudo-class) is counted. The :not() pseudo-class itself does not get counted.

  /* Specificity value: 100
   * a=1 b=0 c=0 */
  :not(#some-id) {
    color: purple;
  }
  
  /* Specificity value: 1
   * a=0 b=0 c=1 */
  :not(span) {
    color: red;
  }

• In case of a tie, the selector that’s farthest down the stylesheet wins.

  /* Specificity value: 12
   * a=0 b=1 c=2 */
  li a:visited {
    color: green;
  }
  
  /* Specificity value: 12
   * a=0 b=1 c=2
   * WINNER! /
  ul a:visited {
    color: red;
  }

My Technique for Calculating Specificity Values

I’m terrible with numbers. So I had a tough time calculating specificity values in my head at first.

So whenever I needed to figure out a specificity value, I’d sketch out a sort of grid matrix on a piece of paper. Then I’d count each selector type and log them in the appropriate column. Figuring out the specificity value was a piece of cake after that. It looks like this:

To double-check my work, I’ll first count the number of selectors. Then I’ll add up a + b + c. The total number of selectors must be equal to the sum of a + b + c.

Otherwise, something went wrong.

For example, if the CSS specificity value is 122, then there should be five selectors.

This technique is slow. And there are tons of tools out there that can do this work for us.

But I figured that if I wanted to understand the concept, I needed to do it slowly and manually. This allowed me to fully absorb the idea behind CSS specificity.

CSS Specificity Examples

Let’s go through some examples.

Example 1

div#container #main ul li

Example 2

table tbody tr.even td.odd

Example 3

.navbar ul.menu li#first a:not(:visited)

Example 4

.footer #menu li#sponsor a[rel=nofollow]::before {
  content: "sponsored link: ";
}

Quiz

You’re not getting off that easy!

Here’s a quick challenge for you. See how many questions you can get right.

.wrapper h1 a

.nav ul#menu li a

.footer span a:not(#about-page)

* { color: red; }
h1 { color: green; }

<body>
  <div class="main">
    <div class="intro">
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
    </div>
  </div>
</body>

body p { font-size: 16px; }
div.intro p { font-size: 24px; }
div.main p { font-size: 20px; }

div.intro p

div.main p

<div class="container">
  <div class="post">
    <h1>My Blog Post Title</h1>
    <p>This is my blog post.</p>
  </div>
</div>

.container .post h1 {
  color: yellow;
}
.post h1 {
  color: red;
}
h1 {
  color: blue;
}
div.container div.post h1[class="heading"]  {
  color: green;
}

In the comments, tell us how you fared in quiz.

References

• “Calculating a selector’s specificity” World Wide Web Consortium (W3C)
• “Specificity – CSS” Mozilla Developer Network (MDN)
• “CSS Specificity” Standardista

Updates

• 06/04/2015: The special rule for the :not() pseudo-class (negation pseudo-class) was wrong. The selector inside the :not() pseudo-class gets counted. The :not() pseudo-class itself does not get counted. Credits and thanks to SelenIT for pointing out this error in the comments.

Related Content

• 12 Common CSS Mistakes Web Developers Make
• Introduction to CSS Variables
• 100 Useful CSS Tips and Tricks
• The Elements of Responsive Web Design

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

The post How CSS Specificity Works appeared first on Six Revisions.