This lesson is a continuation from the previous part 5, CSS Specificity and Inheritance in the Thesis Theme Navigation Menu, lesson of our Customize Thesis Like a Pro video tutorial series.
Connection of Elements to Classes in CSS
Now let’s take a look at the connection of elements to classes in CSS as shown in the Thesis theme navigation menu. So if we take UL and connect it to the class .menu, you can see that it is in fact, more specific because it’s three elements and two classes which is more specific than two elements and two classes. It’s going to take precedence over the whole thing and it applies only in the case where the parent element is a UL element with a class of menu.
Looking at the CSS in Firebug here, we see in the navigation menu structure our UL, that’s the top level menu item, that UL class = menu. So in order for this rule to be applied, there must be a UL that says class = menu and that’s what we’ve got. Now, if we come in here and add LI to this so that these are now equal in weight, that is, two classes and three elements but this one does not take precedence over this one because of the location of the UL. This UL is connected to menu so this is UL class menu. All of the a elements that are part of an LI element, that are part of a UL element with a class of menu are going to be red unless something more specific happens. And so, these are LI items in a UL with a class of red so they do apply.
However, these down here in the navigation menu are actually links that are part of a UL inside of something called the class of menu. What’s really happened here is that by connecting these two together, this has actually become less specific in CSS than this. When you know everything else is the same but an element is connected to a style then it actually has less specificity than when it isn’t connected. If we look at this example here, this says that any element with a class of menu with a UL inside of it and an LI inside of it, will be blue. This says any LI element inside of a UL element with a class of menu; so this is any element and this says only a UL element. And therefore, this becomes more specific.
However, if we come over to this and we apply a div instead of a UL, all of a sudden, this class no longer applies here because this doesn’t meet that condition. This is not inside of a div with a class of menu. It’s inside of a UL with a class of menu. So now, there’s no definition except for the original default definition which applies to these LI items up here in the navigation menu.
So connection matters. If this is not connected or if there’s nothing specified, then it’s any element inside the Thesis theme navigation menu. And if we delete this UL here entirely and just say anything with inside of a class of menu, with an LI and an a, that’s going to be red. That essentially stays the same. It has essentially the same specificity as if UL was attached to menu here.
Stacking of Inheritance and Specificity in CSS
Finally, we’re going to look at how these stack in the Thesis navigation menu. We’re going to get rid of these LIs and we’re just going to address ourselves to ULs which is actually what Thesis does. So if in the CSS we said custom menu a and custom menu UL a, we are talking about 2 different things. Custom menu a is the top level links. Custom menu UL a is any submenu links.
Let’s take this and copy it, paste it and add another UL and instead of blue make it green. Now the top level menu is red, the submenu levels are blue and their submenu levels are green all the way through. And that is the case all the way through this. If we take this one more time, copy that, paste it and add another UL and call it pink, you can see it will become that much more specific. And the third level of submenu then becomes pink and every item below it or contained within it, inherits that property in CSS and passes it on.
This is the perfect example of inheritance and specificity in CSS using the Thesis navigation menu. Everything inherits a and then we become more specific and add all submenus with that UL. And more specific again we add all sub submenus and then finally, we get more specific again and add all sub sub submenus. That is inheritance and specificity in a nutshell.
That wraps up Lesson 6, CSS Specificity and the Structure of the Thesis Navigation Menu, of Customizing Thesis Like a Pro.