We know that one of the best uses of CSS is its ability to cascade style settings (rules). However, I have seen many website CSS files that do not fully take advantage of some of the most powerful aspects of CSS – descending selectors. I will attempt to explain how these work so that you can.
First of all, so that we are clear on the terminology, a selector is what the css rule is being applied to.
selector {property:value}
In practice, that takes this form:
ul {color: #000}
I am using the <ul> for this example, because descendant selectors are very highly utilized in making menus – whether simple or complex. Now, let’s use a very common descendant selector of a unordered list, the <li>.
If you want to make the entire background of your list a certain color, you would apply that rule to your <ul> but if you wanted to make your list items a different color, you’d need to apply that to your <li>. Simple enough? Now, the problem comes in when you have multiple lists on a page. If you are using this for navigation, and you need special styles, then you will need to apply an id to that list so that all the styles for that navigation list don’t suddenly start appearing in your regular text bulleted lists. The question then is… how do I tell the CSS to only apply the styles the the list items of the navigation without going and creating a new class just for them?
It’s pretty easy actually. Here is an example:
HTML:
<ul id="leftnavlist">
<li><a href="#">A Link</a></li>
<li><a href="#">A Link</a></li>
<li><a href="#">A Link</a></li>
<li><a href="#">A Link</a></li>
<li><a href="#">A Link</a></li>
</ul>
CSS:
#leftnavlist { background-color: aqua }
#leftnavlist li {background-color: silver }
Result:
You can see in the CSS all I did was put a space between the name of the ID for the <ul> and the next child that would descend (the <li>), and then set the new rule. The same can be done down multiple levels. For instance, if I tossed in one sublevel list into that one above, then we could add the following:
#leftnavlist li ul { background-color: green }
#leftnavlist li ul li {background-color: white }
Note: I am not advocating the use of the horrid color combination these rules make. I’m using these colors only for emphasis.
So then we would have a list that looks like this, with the two added rules, and one sublevel added in code.
Result:
One of the more common ways of using descending selectors is to do something special to indicate in the menu what the current page is that you are browsing. If you add an <li id=”active”> to one of your menu items, then you can easily do the following to change the active list item to red text:
#leftnavlist li#active {color:red}
Also, consider navigation enhancements. For instance, if you have a menu with multiple submenus, but you only want those submenus to show when the user is actually on that page, you can use that same id=”active” to help you do that as follows:
#leftnavlist li ul { display:none;}
#leftnavlist li#active ul { display:block;}
What the above CSS will do is hide (using the display:none) all of the sublist items, leaving only the primary list items showing. However, for the list item that is currently flagged with the id=”active” it will display the submenu items for that list item.
If the page I am on is the first link, then it will display like this, showing only the submenus for the currently active page list item:
You have many possibilities when you understand descendant selectors. Not only is it easier to set rules for items within certain areas, you can apply the technique different areas of your website.
~Nicole
You seem to be very grounded in your field.I must say you have a nice website you have here. Keep up the good work!!!