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>
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
