Welcome back to Part 5 of Lesson 6 of the Customize Thesis Like a Pro tutorial series. In this part of the lesson, we’re going to look at how specificity and inheritance in CSS influence the structures of the Thesis Nav menu.
Earlier we said that the Thesis theme navigation menu is built out of three HTML elements. The first is the UL element or the unordered list. The second is the LI element or the list item and the third is the a element or the link item. We’re going to look at how specificity and inheritance in CSS will work their way through these elements in the Thesis theme navigation menu.
First, we’ll look at a site that I developed for the purpose of demonstrating this. You can see that we have a bunch of different menu items with submenus and additional submenus. It essentially shows the full range of what can be accomplished in the Thesis navigation menu.
Basic CSS Styling of Links in the Thesis Navigation Menu
We’re going to look at the CSS styling of the link at its most basic in the navigation menu. And that is just the link itself, without any class or name associated, just a and then we’re going to give it a background color of red. A is the link and this is the highest level, that is it’s the only element that is being referenced in this style.
So every single link on this page is going to have a background color of red unless there is a more specific definition which overrides the background color. You can see that our logo is red, these little asterisks are red, the links inside the widgets are red and links at the bottom of the footer are red. And that’s because there was no background color assigned for these or any of the other definitions.
And so as the highest level, this background color is applied all the way throughout. Why doesn’t it show up here? The reason is that a more specific CSS definition exists for the background color of these items. We can see that in Firebug here. Go down to link item and you can see the menu a has a background color of EFEFEF. If I turn that off, now these link colors get the background color of red as well because there’s no longer a more specific definition. As long as this menu a definition exists then this won’t be red. As soon as that goes away then a becomes the most specific definition and thus is applied.
CSS Link Order Rule
We’re going to look at another CSS rule and that’s the order rule. So we have our a and we put a background color of blue. Now why did these things all turn blue in the navigation menu when they used to be red? We have two different style definitions. They both apply equally to these links. What is the rule that makes them blue instead of red? And the CSS rule is that the link that comes last in the order is the link that takes precedence. So if move red down here to below the blue, red takes precedence again. And if I take the blue back down and put it in front of it, then blue will take precedence. So it’s the last rule takes precedence.
Effects of Adding a Class on CSS Specificity
Next we’re going add a class, the custom class, of .custom in the CSS and see how that affects the specificity in the navigation menu. This becomes a more specific rule than this because we added the custom body class to our definition and now nothing is blue. Custom a is always going to be more specific than a because we have a class assigned to it and we also have an element. So one class and one element is more specific in CSS than simply an element.
Effect of Adding More Elements and Classes on CSS Specificity
Let’s add another element to this; we’ll add the list item LI. And again, we have those links that are list items then are going to become red. And so these are obviously parts of a list item inside the widgets. These links are not so they stay blue. This is obviously not, so it shows blue but all the rest of these links are in fact, inside of list items so they go to the color red. That shows that two elements are more specific than one. We’ve got one class in each description; we have two elements here and only one here so this is a more specific rule than this. Let’s add the LI to blue and now because of its order it takes precedence.
Now, instead of just adding two elements, let’s add another class of menu in the CSS. We can see that custom .menu LI a is more specific than custom LI a and this custom LI a still applies to links that are list items. These links no longer apply because they’re not list items and this link no longer applies too because it’s not a list item. This additional class makes these definitions more specific and therefore, turns all of these list items inside of the menu class to be red. So two elements trump one, and two classes trump one. When I add .menu to blue and this again, becomes blue. Notice how these links no longer have a blue background because no, this definition only applies to links that are inside of the navigation menu and no longer apply to other links. And if we remove the LI from the blue (two classes and an element) they go back to being red because two classes and two elements trumps two classes and one element.
Okay so now, let’s add that second element back in but instead of being an LI element, let’s make it an unordered list element, a UL element. Okay now, none of these old links are blue anymore because they’re not part of a UL. These main LI items stay red but the submenus now become blue. And you might think that this would become blue as well because you’ve got 2 classes and 2 elements versus 2 classes and 2 elements. But the thing is they don’t apply to the same selectors.
This selector, the element a, applies to all LI items or elements that are inside of something with a class of menu. This applies to all UL elements that are inside of something with a class of menu. And so because these are UL elements inside of something with a class of menu and because this becomes last, these submenus are blue. Whereas these are not UL elements inside of something that is a class of menu. These are LI elements and so, this UL element does not apply to them. Now if we were however to take this red and put it first, now everything is going to be red because again, these are actually equally weighted, 2 classes plus 2 classes, 2 elements and 2 elements. They are equally weighted. This one however, does apply to every LI item in the menu and since it’s 2nd in order now, it’s the one that takes precedence. Let’s put it back up here.