Combinator

As explained in Tiny CSS Projects

A CSS combinator expresses a relationship between selectors so that elements can be matched according to their structural relationship.

A CSS combinator expresses a relationship between selectors, letting you style elements by their position in HTML instead of adding more class or ID names. CSS provides four: descendant (space), child (>), adjacent sibling (+), and general sibling (~). section 1.6.2

Use the relationship that matches the structure you want to target:

• A descendant combinator selects matching elements anywhere inside a parent, including children, grandchildren, and deeper descendants: article p. section 1.6.2
• A child combinator selects only immediate children: .list > li styles first-level list items without changing nested items. section 1.6.2

Style only the first-level list items

Given a nested unordered list, .list > li { color: crimson; } changes the direct list items while leaving nested items unaffected. A descendant selector such as .list > li ul can separately address the nested lists.

Figure 1.14 The relationships between elements in HTML

Browse the relationship diagram to compare parent, child, descendant, and sibling structures before writing a selector. section 1.6.2

How Tiny CSS Projects covers it

How deep it goes

Defines four combinators and works through descendant and child matching with concrete selectors, while illustrating sibling forms briefly.

Examples

Uses article paragraphs, nested unordered lists, header paragraphs, and sibling images as selector examples.

What it assumes

Assumes basic HTML nesting and CSS selectors while teaching structural relationships through article and list markup.

What you can do after

Apply it via CSS selectors to target descendants, immediate children, adjacent siblings, and general siblings.

How it connects

Connects CSS selectors with HTML nesting, parent-child relationships, sibling relationships, and nested lists.

liveBookmanning.com

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

Related concepts

• direct descendant combinatorincludes · The CSS child combinator, written as >, matches elements that are direct children of a specified parent element.
• descendant selectorincludes · A descendant selector is a CSS selector relationship that matches elements nested at any depth within an element matched by another selector.
• adjacent sibling selectorincludes · The CSS adjacent sibling combinator, written as +, matches an element immediately following another element that shares its parent.
• general sibling combinatorincludes · A general sibling combinator is a CSS combinator, written as ~, that matches all later siblings of a selected element.
• compound selectorcontrasts with · A compound selector is a selector formed by combining multiple simple selectors without a combinator so that one element must match all of them.

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.