7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 5Length: 27 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Ranking CSS Specificity

In this lesson, you’ll learn how to create a ranking system for CSS specificity. This will help you write better CSS and, when you’re dealing with conflicting styles, it will help you determine where the problem is.

To do this, we’ll be using a weight system where we’ll assign a weight value to each selector type in the hierarchy, and we’ll base our system on the official specification described on W3.org. Let’s begin.

Related Links

2.3 Ranking CSS Specificity

Welcome back to the course. In this lesson, you're gonna learn how to create a ranking system for CSS specificity. Now, this will help you write better CSS, and if you're gonna run into any conflicting styles, it will help you fix those problems a lot faster. Now, to do this, we'll be using a weight system, where we'll assign a weight value to each selector type in the hierarchy. We'll base our system on the official specification described on w3 dot org. So, it goes something like this. For each selector, we're gonna write its specificity value as a collection of four digits, A, B, C, and D. D stands for type selectors. C stands for class selectors, attribute selectors, and pseudo-classes. D, or sorry, B stands for ID selectors. And A, stands for inline styles. So, here's the example that they give here. When you write li, that's a type selector. So, A, B and C will be 0, D will be 1. So the specificity can be written like this. When you're using a notation like this, li dot red dot level, what do we have here? We have a type selector and two class selectors. So the specificity here will be c = 2, and d = 1. Or 0, 0, 2, 1. When you write an inline style like this, the specificity will be 1, 0, 0, 0. So based on that, we can concatenate A, B, C, and D and get the following graphics. For inline styles, we have 1, 0, 0, 0, which we can loosely represent as 1000. For ID selectors, we have 0, 1, 0, 0, which we can represent as 100. For class selectors, attribute selectors, and pseudo-classes, we have 0, 0, 1, 0, or 10. And for the type selector and pseudo elements, we have 0, 0, 0, 1, or simply put 1. I think representing the rank with this system of four blocks is very easy to understand. And I got the idea for it from Mr. Silas Kingsley, who did a fantastic tutorial on this topic on Envato Tuts +. So make sure to check out the link below for this tutorial. Now with the system, we can look at some CSS code and calculate the specificity of our selectors. And it goes something like this. In the first example, I have a container, and then two paragraphs with the class of first and second. And the second paragraph has a class of highlight. So then, we can say something like this. Container, paragraph, color blue. So now both of these are blue. Now the specificity here is what? Well, let's say we have a class and we have a type, or a class selector and type selector. So the value would be 0, 0, 1, 1. And that's gonna be equal to 11. Now, if we were to do something like this, div, paragraph, Color red, does it change the color? It does not. Why is that? Because the specificity here is what? We have two types selectors. So we have 0, 0, 0, 2. And that's gonna be equal to 2. So in terms of the specificity value, this selector has a value of 2, this selector has a value of 11. So obviously, these styles will be applied. Now, let's target the highlight. And let's change this color to green. The second paragraph, which has the idea of highlight, gets the new style. So in this case, the specificity is 0, 1, 0, 0. That's gonna equal to 100. So, out of all of these, this selector has the highest specificity value. So, on the second paragraph, this is the style that gets applied. All right, let's look at another example. Here, I have a list element that's nested pretty deep in a ul and then inside the div. And pretty much all of these elements have a lot of ids and classes. And I also have a span inside this list item. And this has a class and id of its own. So, let's do the following. We'll say container, and then, we'll target the class of list. And then we'll target an id of list-item-1. And then, let's also target the span. Let's set color red. Right, so that color is this span element to red. Let's calculate our specificity and see what we have. So we have two ids, one class and one type selector, okay? So it's 0, 2 for two ids. 1, 1, that's gonna be equal to 211. Now let's target that span element in a different way. We'll say list-1, list-item-1, span-1, and we'll set its color to purple. So not that element is purple. Now let's calculate the specificity here. What do we have? We have 1, 2, 3 ids. So we will have 0, 3, 0, 0. That's gonna equal to 300. So this has a higher specificity value than this. Now, let's do another try. Let's target it using this code. Main, list-1, list-item, Span, and let's set its color to green. Will this work? It will not work because, let's calculate, what do we have here? We have one, two, three classes and an ID. So it's 0, 1, 3, 0, right? And this equals to 130. So, this actually has a lower specificity value than the other two. If I'm gonna comment this one, the browser will apply color red because this has the next highest specificity. And if I comment this as well, well, it's gonna be green because it's going to the selectors. So that's example number 2. Now finally, let me show you another example, the last one. And this is, yeah, it's a bit awkward. But it goes something like this. We have a paragraph with an id of lead, that's nested inside 10 divs and one container, right? This is the structure. So, let's see how this would work. If I'm gonna say lead, and I set the color to, let's say red. Here, the specificity will be 0, 1, 0, 0, which is 100. Now, if I'm gonna target that paragraph by using all the class selectors. So, container one, two, three, four, five, six, seven, eight, nine, ten, and then paragraph. Let's do a color green here. It still doesn't do anything. And this is where it's gonna get a bit tricky. Because you might think okay, we have one, two, three, four, five, six, seven, eight, nine, 10, 11 classes or class selectors and a type selector. So our number would look like 11 and 1. And that's gonna be equal theoretically to 111. So 111 is higher than 100. Why doesn't it replace this red? That's because if we don't have another id present, 10 classes do not override the id. It's not how it works. It might seem a little bit counterintuitive because I just explained this whole thing, but there are certain exceptions. So, for example, if I'm gonna duplicate this, but I'm gonna use an id. Now that's another story. Because here, we have one ID, 11 classes, and zero type selectors. So we would have 0, 1, 11, 0, which will equal to 1110. So this has by far the highest specificity. Therefore, it's gonna apply this style. Now if the system I showed you isn't very clear for you or you're just looking for something a bit more unconventional, let me show you two alternatives. The first one is called SpeciFISHity. It uses fish to demonstrate the various ranks you can get when it comes to specificity. And the other one is CSS Specificity Wars. This is a great article written by Andy Clark. It's a bit older but he uses Star Wars. Let's call them metaphors to explain the concept of specificity. So you'll find the links to both of these in the lesson notes. So go ahead and check them out for yourself. I particularly like this explanation because I am a Star Wars fan. So, it's pretty awesome to see that someone made the connection between CSS concept and Star Wars. All right, and that's how we can rank CSS specificity. Hopefully, you can now understand this concept a little bit better, and you'll be able to implement it in your projects. Now before we wrap up this course, there are two more concepts I want to introduce you to. Those are the important rule and the universal selector, and their role in calculating specificity. That's coming up in the next lesson. So, I'll see you there.

Back to the top