Direct descendant combinator

As explained in Tiny CSS Projects

A child combinator is a CSS combinator, written as >, that matches only the immediate children of a selected element.

The direct descendant combinator, written as >, selects only the immediate children of an element. Unlike a descendant selector, it does not reach grandchildren or deeper nested elements. section 1.6.2

Style only first-level list items

Given a nested list, .list > li { color: crimson; } colors the direct children of the element with the list class. Nested li elements remain unaffected because they are grandchildren. The selector .list > li ul { color: initial; } can explicitly restore the nested list’s color. section 1.6.2

Figure 1.14 The relationships between elements in HTML

Use the relationship diagram to distinguish parents, children, grandchildren, and other element relationships before choosing a combinator. section 1.6.2

How Tiny CSS Projects covers it

How deep it goes

Defines the syntax, contrasts it with descendant selection, and demonstrates nested-list behavior.

Examples

Uses a nested unordered list and the selectors .list > li and .list > li ul.

What it assumes

Recognizes parent, child, and descendant relationships between HTML elements.

What you can do after

Apply it via CSS to style first-level list items while leaving nested items unaffected.

How it connects

Connects child selection with descendant combinators, HTML element relationships, and other CSS combinators.

liveBookmanning.com

Read Tiny CSS Projects on liveBook Get the book at manning.com

Related concepts

• combinatorkind of · A CSS combinator is a character or sequence that expresses a structural relationship between selector components.
• description listuses · A description list is an HTML structure that associates terms or names with their corresponding descriptions.
• CSS selectorkind of · A CSS selector is a pattern that identifies document elements by their names, attributes, relationships, states, or other conditions.
• descendantcontrasts with · A descendant is a node or element reachable from another by following one or more downward links in a hierarchy or directed structure.

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.