Offspring Inheriting .....................................................................................
One reason to try to visualize the tree structure is to grasp how inheritance
works. Styles can be applied to some elements, but not to others, based on
the structure of the document. Styles wouldn’t even know how to work if there
weren’t a tree structure or something similar.
You can leverage your knowledge of the tree structure to specify various
kinds of specialized targets for your styles. What if, for example, you want to
underline italics in paragraphs, but never underline them in headlines? You
could go through the entire document entering a border-bottomproperty or
a text-decoration: underlinefor each italics element in paragraphs, but
then you aren’t using the efficiency of CSS.
You can create rules that specifically target only those elements with particu-
lar ancestors, or certain siblings (related children — as in the two paragraph
elements in Figure 14-1, which are children of the same parent body), and
other kinds of structural relationships. In this case, I want all italics that are
children of paragraphs to be underlined. I don’t want underlining for italics
in headlines, or lists, tables, or anywhere else. Just paragraphs.
Contextual Selectors ...................................................................................
Here’s an example that accomplishes just that by using a technique called
contextual selectors. (Recall that a selectoris just another name for an HTML
element, but it’s called a selector when it’s used to specify a CSS rule.) In the
following style, the pand iare both selectors:
<style>
p i {border-bottom: 1px solid;}
</style>
Contextual selectors is a new kind of style definition not previously discussed
in this book. Notice that the pand iare not separated by commas (that kind
of style is called grouping.)
The code above does not mean that all paragraphs and all italic elements are
to be underlined. It means that only italic elements that are children or other
descendants of a paragraph are to be underlined. So an italics element within
a headline is not underlined because that headline is not a descendant of a
paragraph. The style only applies to italics descended from paragraphs. It’s a
contextual selector, not a general selector.
Those in charge of computer programming issues (who arethey?) have
issued a proclamation that henceforth everyone should describe contextual
selectors as descendant selectors. But, then, they were the ones who first
Chapter 14: Specializing in Selection 257
