HTML and CSS Reference
In-Depth Information
CHAPTER 3
■ ■ ■
Specificity and the Cascade
I
n the first two chapters, we reviewed the basics of writing proper (X)HTML and gave you
a general overview of CSS. You learned how to attach style sheets to your documents, but now
it's time to put on your work clothes, head to the garage, and rip apart the engine to find out
exactly how the darn thing runs. In this chapter, we'll take a quick look at CSS selectors and
then dive into the guts of
specificity
(determining which selector overrides another, and how
to take advantage of this knowledge) and the cascade (the method used by browsers to calcu-
late and assign importance to each rule in your style sheet).
CSS 2 AND IE/WIN
It's worth noting here that the most widely used browser on the planet as of this writing (IE 6) doesn't support
some of the cooler selectors in the CSS 2.1 specification, which are used throughout this topic. The situation
improves with IE 7 (see Appendix C for more details; there are also numerous mentions of IE 7 support through-
out this topic—look to the index for specifics), but you're better off having the latest version of Firefox, Safari,
or Opera available to view all the examples in this chapter. And don't worry, if you absolutely mustprovide
a high level of support for IE/Win versions 6 and earlier, Chapter 6 provides the CSS therapy you crave.
Selectors
You already know what a selector is from reading Chapter 2, so rather than giving you a detailed
description of every possible selector, we're going to provide an overview of selector types, and
then move on to the examples.
Selectors: Simple and Combined
Officially, there are two categories of selectors:
simple
and
combined
(also known as
contextual
).
The W3C (
www.w3.org/TR/CSS21/selector.html#q2
) provides a rather wordy description of
a simple selector:
A simple selector is either a type selector or universal selector followed immediately by
zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple
selector matches if all of its components match.
27
