Descendant selector
A descendant selector is a CSS selector relationship that matches elements nested at any depth within an element matched by another selector.
CSS in Depth, Second Edition
A descendant selector is a CSS selector that matches an element occurring anywhere inside an ancestor matched by another selector.
- How it is used
- Shows how ancestor-dependent styling can undermine reusable CSS modules.
- How deep it goes
- Explains nesting behavior and maintenance trade-offs, but does not provide a comprehensive selector reference.
- Examples
- Contrasts a header dropdown selector with a modifier, and a nested modal descendant selector with a compound selector.
- What you can do after
- Evaluate/understand when an ancestor-dependent selector limits reuse and when a direct-child selector expresses a deliberate structural constraint.
Read how CSS in Depth, Second Edition explains descendant selector →
Web Design Playground, Second Edition
A descendant selector is a CSS selector that matches elements nested at any depth within a specified ancestor.
- How it is used
- Targets related elements inside a page region so styles apply to selected content rather than every matching element.
- How deep it goes
- Defines the space combinator and demonstrates it, then stops short of one-level targeting handled by the child selector.
- Examples
- Uses div p to style body paragraphs and p.footnote a.external to demonstrate more precise descendant targeting.
- What you can do after
- Apply it via CSS to style nested elements at any depth and choose child selectors when the target must be one level down.
Read how Web Design Playground, Second Edition explains descendant selector →
Tiny CSS Projects
A descendant combinator is a CSS combinator, conventionally written as whitespace, that matches elements occurring anywhere within another selected element.
- How it is used
- Targets related HTML elements through parent–descendant relationships without overusing class or ID names.
- How deep it goes
- Defines space-separated syntax, explains descendant depth, and contrasts it with immediate-child targeting.
- Examples
- Uses `article p` for double-spaced paragraphs and contrasts nested list items with `.list > li`.
- What you can do after
- Apply it via CSS selectors to style matching elements at any depth within a chosen parent.
Related concepts
- combinatorkind of · A CSS combinator is a character or sequence that expresses a structural relationship between selector components.
- CSS selectorkind of · A CSS selector is a pattern that identifies document elements by their names, attributes, relationships, states, or other conditions.
- CSS nestingused by · CSS nesting is a stylesheet feature that allows rules to contain nested selectors and declarations expressing hierarchical or related selector structures.
- class selectorcontrasts with · A class selector is a CSS selector that matches elements whose class attribute contains a specified class name.
- direct descendant combinatorcontrasts with · The CSS child combinator, written as >, matches elements that are direct children of a specified parent element.
- modular csscontrasts with · Modular CSS is an approach to organizing styles into separate, reusable, relatively independent units that can be scoped or managed individually.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.