liveBook · Manning

Adjacent sibling selector

As explained in Tiny CSS Projects

An adjacent sibling combinator is a CSS combinator, written as +, that matches an element immediately following another element at the same structural level.

The adjacent sibling combinator, written as +, targets an element immediately following another element at the same structural level. It helps style related elements without adding extra class or ID names. section 1.6.2

Style the paragraph after a header

Use header + p to select only the paragraph immediately following a header, then make it larger and bold: header + p { font-size: 1.25rem; font-weight: bold; }. A later paragraph or a paragraph elsewhere is not selected by this relationship. section 1.6.2

Listing 1.9 Adjacent sibling combinator
header + p {
  font-size: 1.25rem;
  font-weight: bold;
}

View the complete adjacent-sibling selector and its declarations. section 1.6.2

How Tiny CSS Projects covers it

How deep it goes
Defines the + syntax and demonstrates one styling rule, without developing selector behavior beyond the immediate example.
Examples
Demonstrates header + p with larger, bold text applied to the paragraph immediately after a header.
What it assumes
Assumes recognition of HTML elements and structural relationships between them.
What you can do after
Apply it via CSS selectors to style an element immediately following a chosen sibling.
How it connects
Relates sibling targeting to descendant combinators, child combinators, and general 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.