Web Design in a Nutshell, 3rd Edition

Child Selector

A child selector is similar to the descendant selector, but it targets only direct children of a given element. In other words, the element must be contained directly within the higher-level element with no other element levels in between. Child selectors are separated by the greater-than symbol (>). The rule in the following example makes the background of emphasized text gray, but only when it is the child of a paragraph:

    p > em {background-color: gray;}

Therefore, in the following markup example, only the first instance of em receives a gray background, because the second one is the child of an intervening strong element:

    <p>I've got <em>laser</em> eyes, and <strong>I know what you're
<em>thinking.</em></strong></p>