Welcome back to Part 3 of the Lesson 6 of the Customize Thesis Like a Pro tutorial series. In this part of the lesson, we are going to discuss how CSS specificity and the Thesis custom body class work together.
Thesis Custom Body Class Refresher
Now just to refresh your memory about the Thesis custom body class, what the Thesis theme does is it adds a custom class to the body tag of every page that it creates. And for the page, it uses custom and then the name of the page which in this case is home. If we go over to demo 1, you’re going to see it’s got a custom and demo 1 and then as you may recall from a previous lesson, this is the custom class that we added using the Thesis CSS system.
Another example can be seen in categories so we’ll select the apples category. The Thesis theme uses the custom and cat_ and then the slug of the categories. For example, here you’ve got custom cat_green-apples, that’s the custom class that’s been added to it. If we add tags like that, it would be custom cat and then the tag slug instead. If we go to the blog page, it just receives the custom class. If we go to a blog post, it receives the custom class except in this case, this is one of those where we added that new custom class to it too. But if we go back to this normal one for a moment and look at this, you can see that looking at this post here, it gives us the additional class of custom.
And in any case, that’s what Thesis does. It adds this additional class name to the body tag of every page that it creates. And that creates new levels of specificity for your pages and for the HTML elements on your pages. Now I want to take a look at another diagram for this.
Understanding CSS Inheritance and Specificity in Thesis
This is a diagram that represents the h3 tag again. Body is the big defining class and the h3 gets some of its style simply from the body. And then you have the h3s that exists inside of format text and those are different than the h3s outside of format text because format text adds its own styling and so that overlap represents a higher level of specificity. Format text h3 is more specific than h3. The same thing is true for sidebars. Sidebars h3 is more specific than simply h3.
Well, the custom class adds another layer to that. You’ve seen this many times before but the way that this works is that this is a custom class that the Thesis theme adds. And so, anything that you start off with .custom is going to be more specific than any of the Thesis definitions. And, in this case, custom format text h3 is more specific still, than format text h3. In fact, format text h3 is the way Thesis creates it. When you add .custom to that, you add your own styling that becomes more specific still and overrides that. So that’s sort of the first level of the way this works. It’s h3 versus format text h3 versus custom format text h3. Each of those are progressively more specific.
When you add the other custom body class in CSS, the page name, then it becomes a little bit more complex. We’re going to still use h3 format text custom but then also that custom page name. And so h3 by itself is the least specific. H3 over format text, this section right here the way Thesis writes it, that’s more specific. H3 over format text or .custom format text h3 is the next level of specificity up. And then finally, we have the sort of the ultimate level of specificity here which is the custom page name format text h3 which is this little section right here. That becomes the most specific part of it.
Additive Nature of CSS Specificity
In an earlier part of this lesson I said that these different elements are additive. Two classes are more specific than a single class. So custom and format text are two classes in CSS therefore, being more specific than format text h3. If you add the custom page name, custom page name format text, now you have three classes plus the element. That makes it more specific than two classes plus the element.
So the custom class system works by adding additional layers of specificity in CSS to the appearance of the site. If you don’t like the way Thesis styles the h3, you can change the format text h3 for your entire site by using a rule without custom in front of it. So .custom .format text h3 would supersede all of the format text h3s. And if you only want to do it on a specific page then you could do custom page name format text h3 and that would only affect that one specific page and none of the rest.
Affecting CSS Specificity of Plugin Styles
We just described how specificity works to enable you to change the styling of a specific page by using that custom class. Well, this also works on other elements of the site that generate style sheets, for example, plugins. There are a number of plugins that generate style sheets and if you want to change those style sheets, you can simply add the .custom and that makes your change more specific than the original class definition and you can override the plugin’s CSS. If you only want to override the plugin’s CSS for one specific page then you can use the page name plus the custom and it’ll override for that specific page. It’s quite handy both for the Thesis theme and also other style sheets that are created by your WordPress installation.
And this rule, that anything that begins with a .custom is going to take precedence over something that doesn’t, is good except for two specific conditions. One of them is when the plugin uses the important declaration for a class which we’re not going to be spending time talking about but it’s a way of forcing you to do what the plugin wants you to do and not giving you the flexibilities to change that. And then second one is if the plugin creates inline styles. If it creates inline styles, there isn’t any way for you to overcome that because its inline styles are going to take precedence. But if it behaves nicely and it just uses its own style sheet then putting a .custom in front of it is going to give you the power over that style sheet.
Another Example of CSS Specificity with Classes
And the second part of that rule is that anything that appends a second body class or a second and third body class will take precedence over one that only has one. Let’s go back here to demo 1 for an example. We have the custom demo 1 and red group. We really have three classes here and if we wanted to make sure that our definition only applied to this page, we would use all three of those classes in the definition because any two of these together could potentially clash. So if you use all three, if you did custom demo 1 and that was different than another custom red group, then there’d be some difficulty in resolving the difference. But if you used custom demo 1 and red group then you know for certain that these three classes are going to trump the two classes. And any one of these two classes used in a declaration will trump just the custom by itself.
Specificity of IDs and Classes in CSS
You might think that the magic bullet here is to just put custom in front of anything and that will work for you, no problem. But actually, it’s not really the case. There is another element to this that I spoke about earlier which was that ids are more specific than classes and classes are more specific than elements. And then those things are additive two ids are more specific than one id, two classes are more specific than one class. I’m going to show you a specific example where Thesis uses more than one id in its definition and you’ll need to use the pair of ids as well.
Let’s go to our Lesson 2 version of this site. This is called PID logo and if we inspect the element, you can see that is the id logo. And if you look over here at its size, you can see that is actually specified by header logo. So if you are going to try to change this size, you would need to use both of these ids because if you only used one of these ids, the two ids one is going to take precedence. Let’s edit CSS here, we’ll come to custom css and test this. And so let’s say we have .custom #logo. If you said, font size: 6 em, you can see it doesn’t change in size. And the reason it doesn’t change is because the original definition #header #logo is more specific than .custom logo. As soon as you use this formula, custom header custom logo or custom header logo, then you’ll get the increase in size because now custom header logo is more specific than the original header logo.
So it’s not just the fact that it’s custom here. What is controlling here is the way specificity is calculated with ids being more specific than classes and classes being more specific than elements. And two ids are more specific than a single id and two ids are more specific than a single id and a single class. So if you’re up against something like this, you definitely need to include .custom #header #logo.
On the other hand, if you look at one of these places where logo is controlling font weight, you could use this custom font size or custom #logo alone to change font weight because it’s not being defined with header and logo like that. And so if you said font weight: normal, now you can see the bold goes away and that drops down. But that’s because this doesn’t have header in front of it. As such, putting .custom in front of logo makes it more specific.
That wraps up Part 3 of Lesson 6 of the Customize Thesis Like a Pro tutorial series.