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;}
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.