A descendant selector targets elements nested anywhere inside a specified ancestor. Write the ancestor and descendant element names with a space between them, as in div p. section 19.5 section 19.15
Keep these distinctions handy:
- The space is a combinator: it connects the ancestor to the element being targeted. section 19.5
- The selector reaches through every nesting level, not just the next one. section 19.5
- Use the child selector with > when only the immediately nested level should match. section 19.5
- Combine element, class, and descendant selectors to narrow the target, such as p.footnote a.external. section 19.8
Style only the body paragraphs
A page can leave its introductory paragraphs untouched while styling paragraphs inside a div: div p { color: #444; font-family: Georgia, serif; font-size: 1rem; }. The selector skips the heading and paragraph outside the div, then matches both paragraphs inside it. section 19.5
div p
View the compact div p selector syntax used to target paragraphs within a div. section 19.5
