What is CSS Specificity?
So what is specificity? Specificity is a mechanism within the CSS cascade that aids in conflict resolution. So back in Lesson 2, we talked a bit about the CSS cascade and as you may recall, the cascade goes from higher priority to lower priority. The browser default is the lowest priority and only kicks in when something else doesn’t exist. External style sheets are the next layer of priority and this is where we primarily work. Internal styles are styles that are generally added by plugins that are actually added to the HTML page. Otherwise, we don’t see them. And then finally, inline styles which are generally added inside the text editor but can also irritatingly be added by plugins. This goes from the least important to the most important. This is a general concept of the cascade and in fact, that cascade continues inside of each of these elements, inside of external style sheets for example, which is where we’re really going to talk about today.
Specificity and External Style Sheets
The concept of specificity states that when two or more declarations apply to the same element, set the same property of that element and have the same importance and origin, the declaration with the most specific selector will take precedence. Let’s look at an example with an HTML element, h1 with a color specified. When multiple declarations apply to this element and set the same property, here color, and have the same importance and origin (which has to do with this place inside the cascade), then the declaration with the most specific selector will take precedence. All of our code is going to have the same origin because its origin will be external style sheets.
CSS Syntax – Selectors
As we said in the past there are two kinds of CSS selectors. There is the id selector which is represented by the pound sign and there is the class selector which is represented by the period. So in this example here, this is a class selector on an HTML element with the given properties of that element. This might sound a little bit confusing but actually it’s pretty much common sense. Once we stop talking about it in big words like this and start looking at how it gets applied it will make sense.
Sometimes misunderstanding a slight bit of this equation can make it difficult to figure out which should have precedence. And so there actually is this ugly equation for specificity that many places use to start talking about it. They give you this calculation method and then you add one for each instance of one thing and one for each instance of another. And if you really understand the method then you do understand this. But I don’t think it’s particularly helpful if you don’t understand it. If you want to see that calculation and action, sitepoint’s got the best explanation I’ve seen of it and you can find it on the link for the lesson or at reference.sitepoint.com/css/specificity.
Specificity of IDs, Classes and Elements
We’re going to look at a more practical explanation in this part of the lesson. The simplified version of that equation is that ids are more specific than classes and classes are more specific than elements. Elements really are the least specific of all and these various things can be added together. For example, two ids are more specific than one id and two classes are more specific than one class. In fact, two elements are more selective than one element. And so, there is an additive quality to each of these things that can help you drill down to the specific element that you want to style. And we’re going to take a look at this idea by looking at headings.
Example of Specificity of IDs, Classes and Elements in a Heading
In particular, we’re going to look at the h3 heading at our site here. These are h3 headings and this blue color has been applied to them in Thesis Design Options. This category is also an h3 heading and this color has been applied also in Thesis Design Options. If we inspect this element, this h3 element is getting this color from format text h3 which is something that we set in Design Options.
Let’s look at our diagram of this, a standalone h3 tag, that is an h3 tag that’s not part of format text or part of sidebars, standalone h3 tag is going to have a color of white because it’s getting its color from the body. And in this case, all we have is an element. So if we move over here and we add a class to the element, this class plus the element is more specific because we’ve added this class to it. We’re not just talking about all h3s or any h3s. We’re talking about h3s that are inside of format text. That’s a little bit more specific than this and the same thing is true with sidebars h3. This color is more specific than this.
It’s so specific that this color setting does not affect this color because format text and sidebars are two different contexts or two different levels of specificity. And then you move on to the most specific which is where we add the custom class. And so if we come back over to that site and we say custom .format text h3 and we give it a color of red, it’s going to supersede this but not supersede this because this is a more specific form of this. So let’s look at that.
Come over to Web Developer and let’s edit CSS and in custom.css. We add .custom .format text h3, and if we give it a color, you can see that it does supersede in the color that was given to it inside the Design Options. The reason it does that is because custom is more specific than format text. So .custom .format text h3 is the most specific instance of the h3 definition in this application. And it doesn’t affect this one at all because in this case, this is more specific because it applies to the h3 tag inside of sidebars.
The common sense thing is that if you just have this standalone h3 tag, it applies to every h3 tag except those h3 tags that get changed. And this h3 tag definition is an example of where it gets changed but it only for this class. It doesn’t get changed for anything else. And this version of it is that much more specific because this color only gets changed in those pages where there’s a format text h3 that also has the custom body class of .custom. And so, as we narrow our definition down, our definition becomes more specific and the definition affects less and less h3 tags.
That wraps up Part 2 of Lesson 6 of the Customize Thesis Like a Pro tutorial series.