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

In this case, as Figure 1-17 shows, any emphasized text that is part of an unordered list
that is part of an ordered list that is itself part of an unordered list (yes, this is correct)
will be gray. This is obviously a very specific selection criterion.
Figure 1-17. A very specific descendant selector
Descendant selectors can be extremely powerful. They make possible what could never
be done in HTML—at least not without oodles of font tags. Let's consider a common
example. Assume you have a document with a sidebar and a main area. The sidebar
has a blue background, the main area has a white background, and both areas include
lists of links. You can't set all links to be blue because they'd be impossible to read in
the sidebar.
The solution: descendant selectors. In this case, you give the element (probably a div )
that contains your sidebar a class of sidebar , and assign the main area a class of main .
Then, you write styles like this:
.sidebar {background: blue;}
.main {background: white;}
.sidebar a:link {color: white;}
.main a:link {color: blue;}
Figure 1-18 shows the result.
Figure 1-18. Using descendant selectors to apply different styles to the same type of element
:link refers to links to resources that haven't been visited. We'll talk
about it in detail later in this chapter.