HTML and CSS Reference
In-Depth Information
Table 3-5.
Specificity Effect: Alternate Layouts
Inline
# of ID
# of Class
# of Element
Selector
Style
Selectors
Selectors
Selectors
#content
0,
1,
0,
0
#sidebar
0,
1,
0,
0
body#homepage #content
0,
2,
0,
1
body#homepage #sidebar
0,
2,
0,
1
body#contact #content
0,
2,
0,
1
body#contact #sidebar
0,
2,
0,
1
Using specificity in this manner gives us lots of flexibility with our layouts, without having
to adjust the markup one bit.
Summary
The depths of the cascade, specificity, and importance can be confusing at first, so the best
way to truly understand how rules and selectors interact with each other is to experiment.
Take the knowledge you've gained in this chapter, and try a simple example to make sure the
logic works for you. Then create some strange and complicated selectors and see what hap-
pens when you change and reorder them in your style sheet. The interactions become easier
to recognize and manipulate the more you play with them, and that's the fun part, especially
when dealing with the various quirks and oddities associated with browser types and versions,
as we'll review next in Chapter 4.
