Specificity and the Cascade - Pro CSS Techniques - page 51

As you can see, the base markup is simply an unordered list ( ul ) with list items ( li ), each
containing a (the link), span (the text only visible on :hover ), and em (the link description). No
IDs, no classes—just the bare markup and content.
The CSS uses the enclosing <div id="sidebar"> to target the elements in the list, since
Dan has more than one ul in his sidebar (one list for each category of link). This way, he doesn't
have to assign specific IDs or classes to the ul s or enclose them within more specific wrapper
div s. The aim is to get your documents as lean as possible when it comes to IDs and classes,
rather than littering your document with unnecessary markup.
#sidebar ul {
list-style:none;
margin:0 0 12px;
padding:0;
font-size:11px;
}
#sidebar ul a {
display:block;
background:url(../i/icon_bullet_sidebar.gif) no-repeat 12px 7px;
padding:3px 0 3px 25px;
color:#cb5100;
font-weight:bold;
text-decoration:none;
}
#sidebar ul a span {
color:#333;
font-size:10px;
font-style:normal;
font-weight:normal;
}
#sidebar ul a em {
display:block;
color:#808080;
font-size:10px;
font-style:normal;
font-weight:normal;
}
#sidebar ul a:hover {
background-color:#262626;
background-image:url(../i/icon_bullet_sidebar_hover.gif);
color:#6cf;
border-right:3px solid #221C18;
}
#sidebar ul a:hover span { color:#fc3; }
#sidebar ul a:hover em { color:#4d4d4d; }
The selectors needed to create our effects are those targeting a , span , and em . Let's look at
each part of the effect, and then compare the specificity of the selectors used.