CSS Specificity Explained

If you've ever run into weird, "unexplainable" styling issues, there's a high chance it was something regarding specificity. Specifi-what-ty? Specificity. Let's dive into it.

Note: For the entirety of this tutorial, we will use `CSS`. If you use something else, I'm assuming you can translate this article into your preferred language of styling yourself. If not, let me know by asking your question in the comment or emailing me if you are reading this on my own website.

What is specificity?

Let's be specific about it. Jokes aside, it can be quite difficult to understand at first. Specificity is a calculation being made to determine which CSS rules should be applied. This doesn't make it a lot clearer, so let's look at the selectors we use in CSS to define our styles: ID, CLASS, and TYPE. Notice the order of these, as it is important to understand specificity. First, let's refresh and look at examples of each of these selectors.

ID

This one is relatively simple. It's used to style something that shouldn't be reused throughout the entire application. It's extremely specific. An example of this would be #gallery. The HTML would be <div id="gallery">...</div>.

CLASS

The first example of this type of selector would be the obvious class selector .blogpost. You would use a class selector to define something a little less specific, something that might be used in multiple places or at multiple times. In HTML, this would be defined as <div class="blogpost">...</div>. Another example of what would fall under the class column of specificity are attribute selectors. These are selectors that target based on the attributes of an element. For example, [type="checkbox"]. Another example are pseudo-class selectors like :hover.

TYPE

Type selectors are selectors where you directly refer to the type of HTML element. Think of the paragraph, h1, or even table elements.

Okay... let's talk specificity now

We just looked at examples of selectors we can use while styling. The specific selector we use is important as it determines what the specificity is. Specificity is basically a little list with counters. Each type of selector (ID, CLASS, or TYPE) has its own column in the list. If we would write it out, we could say it like this: "ID - CLASS - TYPE". The CSS styling with the highest numbers, starting from the left, will get applied. This is all quite dry and might be hard to understand, so let's look at some examples.

Examples to start with

Let's say we define the following CSS selectors:

#gallery {
... styling
}

This would have a specificity of "1-0-0". Why? Well, #gallery is an ID selector, so that value will be increased to 1. Let's look at another example.

.blogpost .heading {
  ... styling
}

What do you think? I see two classes, classes are in the middle column. If you thought this would have a specificity of "0-2-0", you would be correct! Let's look at one more relatively simple example.

p {
  ... styling
}

Just a simple type selector. This applies to all paragraphs, so it's not that specific. What would the calculation for this be? If you thought "0-0-1", you're correct!

Okay, let's look at one more "simple" example before we dive head first into the more difficult calculations to see which styling would be applied.

p.blue {
  ...styling
}

What do you think the specificity is here? I think you got this by now, because it's "0-1-1"!

Intermediate examples

We covered the basics so now let's look at some more realistic examples of how we would have written our rule sets and see what styling would be applied in the end. This can get quite difficult the more selectors you have, but you got this!

header h1#title {
  color: red
}

header #title {
  color: blue
}

So, which one would get applied? Try it yourself and see if you're right. Here's a codepen to see the result. SPOILER ALERT: The specificity is "1-0-2" vs. "1-0-1". So the header h1#title styling would be applied.

This is pretty fun; let's look at one more example before wrapping it up.

fieldset div label #max {
color: red;
}

#max {
color: blue;
}

So, would the text be red or blue? I'm not going to give you the answer this time... I will give you the link to a codepen, though! But before clicking on it and seeing the result, try to figure it out yourself! This is the codepen for the example above.

Conclusion

Specificity is quite difficult once you have loads of selectors in your production application. We didn't cover all the different types of examples, but if you follow the explanation given, you should get very far! There are certain tools out there that calculate the specificity for you, but I recommend getting the hang of this yourself. Practice it a bit more if you need to. It's definitely a decent skill to have in your toolbelt!