Descendant

As explained in Web Design Playground, Second Edition

A descendant element is an HTML element contained within another element directly or through one or more intermediate elements in the document tree.

A descendant is an HTML element contained inside another element, either directly or through one or more intermediate levels in the document tree. Think family tree, but with fewer awkward reunions: an element can be a parent, child, ancestor, or descendant. section 19.3

Use these relationships to read an HTML tree:

• A child is exactly one level below its parent; a descendant can be one or many levels below an ancestor. section 19.3
• Elements on the same level are siblings, while an ancestor contains one or more levels of elements. section 19.3
• Some CSS properties pass from a parent to child and descendant elements through inheritance, but borders and other properties do not. section 19.12

Targeting descendants with CSS

The selector `div p` styles every `p` element inside a `div`, regardless of how deeply nested it is. This can separate body paragraphs from introductory paragraphs. Use the child combinator instead when only the immediate next level should match. section 19.5

Figure 19.1 The tree structure of a typical web page

Explore the web-page tree to see parents, children, ancestors, descendants, and siblings in relation. section 19.3

How Web Design Playground, Second Edition covers it

How deep it goes

Defines hierarchy terms, demonstrates inheritance, and applies the descendant combinator while deferring one-level targeting to the child combinator.

Examples

Uses a web-page tree, inherited styles in nested div content, and the div p selector for body paragraphs.

What it assumes

Introduces HTML hierarchy vocabulary before applying CSS selectors and inheritance.

What you can do after

Apply CSS descendant selectors to style nested elements and distinguish broad descendant matches from immediate child matches.

How it connects

Connects descendants with ancestors, parents, children, siblings, inheritance, CSS selectors, and the child combinator.

liveBookmanning.com

Read Web Design Playground, Second Edition on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Causal Inference for Data ScienceA descendant is a variable reachable from another variable by following one or more directed causal arrows.

Compare how 2 books explain descendant →

Related concepts

• focus-within pseudo-classused by · The focus-within pseudo-class matches an element when it or one of its descendants has focus.
• confoundercontrasts with · A confounder is a variable associated with both an explanatory or treatment variable and an outcome, whose influence can distort their apparent relationship or estimated causal effect.
• backdoor criterionused by · The backdoor criterion is a graphical condition for identifying a causal effect by requiring a variable set to block every backdoor path while excluding treatment descendants.
• direct descendant combinatorcontrasts with · The CSS child combinator, written as >, matches elements that are direct children of a specified parent element.
• ancestorpart of · An ancestor is an entity higher in a hierarchical structure, reached by repeatedly following parent relationships toward the root.

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.