Web Design in a Nutshell, 3rd Edition

Descendant Selector

Descendant selectors target elements that are contained within (therefore descendants of) another element. They are indicated in a list separated by a character space (the combinator for descendant selectors ), starting with the higher-level element. For example, the following rule specifies that em elements should be olive, but only when they are descendants of a list item (li). All other em elements are unaffected by this rule.

    li em {color: olive;}

Like simple type selectors , contextual selectors can be grouped together in comma-separated lists. The following code makes emphasized (em) text red only when it appears in the context of a first-, second-, or third-level heading:

    h1 em, h2 em, h3 em {color: red;}

Descendant selectors may also be nested several layers deep, as shown in this example that targets only emphasized text (em) within anchors (a) within ordered lists (ol).

    ol a em {font-weight: bold;}