liveBook · Manning

General sibling combinator

As explained in Tiny CSS Projects

A general sibling combinator is a CSS combinator, written as ~, that matches all later siblings of a selected element.

The general sibling combinator, written as ~, selects all later siblings of an element. It uses relationships between HTML elements to target related elements without adding extra class or ID names. section 1.6.2

Targeting sibling images

A selector such as header ~ img targets images that are siblings of a header, as illustrated by the general sibling example.

How Tiny CSS Projects covers it

How deep it goes
Defines the syntax and illustrates sibling targeting, but does not develop implementation internals.
Examples
Shows sibling images targeted from a header in a visual example.
What it assumes
Assumes basic HTML element relationships and introduces combinators as a way to select related elements.
What you can do after
Apply it via CSS selectors to target later siblings of a selected element.
How it connects
Connects CSS selectors with descendant, child, and adjacent sibling combinators.
Cover of Tiny CSS Projects
liveBookmanning.com
Read Tiny CSS Projects on liveBook Get the book at manning.com

Related concepts

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.