HTML and CSS Reference
In-Depth Information
background-repeat:no-repeat;
background-position:0 50%;
padding-left:10px;
color:#ddd;
text-decoration:none;
}
#footer ul li a:hover {
color:#fff;
}
#footer ul#nav-a li a {
background-image:url(../i/bullet_footer_blue.gif);
}
#footer ul#nav-b li a {
background-image:url(../i/bullet_footer_orange.gif);
}
#footer ul#nav-c li a {
background-image:url(../i/bullet_footer_green.gif);
}
These rules highlight a few different techniques that take advantage of specificity (and
also the cascade):
First, the
ul
s are all styled with one rule, taking care of the basic characteristic, and
using a selector that makes the rule specific to
ul
s within the
#footer
.
•
Next, common properties are assigned to the
a
elements—since the only thing
different about the three lists is the bullet color, we can even set
background-repeat
and
background-position
globally for all links within the three lists.
•
•
The list IDs are only used to give a higher specificity score to the last three rules, which
set
background-image
for the links within each of the lists.
There's nothing to override in this case; we're simply sharing styles among similar ele-
ments (cutting down on the number of rules in our style sheet and thus making maintenance
easier) and using IDs to create rules that will target elements more specifically (see Table 3-4).
Table 3-4.
Specificity Effect: Targeting Specific Elements
Inline
# of ID
# of Class
# of Element
Selector
Style
Selectors
Selectors
Selectors
#footer ul li a
0,
1,
0,
3
#footer ul#nav-a li a
0,
2,
0,
3
#footer ul#nav-b li a
0,
2,
1,
3
#footer ul#nav-c li a
0,
2,
1,
3
Creating Alternate Layouts
Another useful technique is changing the positioning, color, or any other properties of ele-
ments for different sections of your site. By setting specific IDs on the
body
element based on
