Selectors - Selectors, Specificity, and the Cascade - page 32

Before we get started, there's an aspect of pseudo-classes that needs to be made explicit
here: pseudo-classes always refer to the element to which they're attached, and no
other. Seems like a weirdly obvious thing to say, right? The reason to make it explicit
is that for a few of the structural pseudo-classes in particular, it's a common error to
think they are descriptors that refer to descendant elements.
To illustrate this, I'd like to share a personal anecdote. When my eldest daughter, also
my first child, was born in 2003, I announced it online (like you do). A number of
people responded with congratulations and CSS jokes, chief among them the selector
#ericmeyer:first-child . The problem there is that selector would select me, and then
only if I were the first child of my parents (which, as it happens. I am). To properly
select my first child, that selector would need to be #ericmeyer > :first-child .
The confusion is understandable, which is why we're addressing it here; reminders will
be found throughout the following sections. Just always keep in mind that the effect
of pseudo-classes is to apply a sort of a “phantom class” to the element to which they're
attached, and you should be okay.
Selecting the root element
This is the quintessence of structural simplicity: the pseudo-class :root selects the root
element of the document. In HTML, this is always the html element. The real benefit
of this selector is found when writing style sheets for XML languages, where the
root element may be different in every language—for example, in RSS 2.0 it's the rss
element—or even when you have more than one possible root element within a single
language (though not, of course, a single document!).
Here's an example of styling the root element in HTML, as illustrated in Figure 1-23 :
:root {border: 10px dotted gray;}
body {border: 10px solid black;}
Figure 1-23. Styling the root element
Of course, in HTML documents you can always select the html element directly,
without having to use the :root pseudo-class. There is a difference between the two
selectors in terms of specificity, which we'll cover later on.