_{—Part of CSS Primer for the AI Era — Selectors}

Combinators let us describe how elements relate to each other in the DOM.
They are the grammar that connects one selector to another.

If basic selectors answer:

• “What kind of element is this?”

Combinators answer:

• “Where does this element live in relation to others?”

This is where CSS becomes expressive —
and where AI often needs guidance.

HTML is a tree.
Elements live:

• inside other elements
• directly inside other elements
• next to other elements
• after other elements

Combinators let us describe these relationships
without adding extra classes.

They help us say things like:

• “Style all links inside the nav.”
• “Style only the top‑level list items.”
• “Style the first paragraph after a heading.”

This is the expressive heart of CSS.

AI‑steering cue:

“Use a combinator — 
I want to express the relationship, not add more classes.”

Pattern: A B
Meaning: “Select every B that lives anywhere inside A”.

This is the most common combinator.
It’s broad, flexible, and expresses meaning well.

Examples:

• nav a → all links inside the nav
• article p → all paragraphs inside the article
• footer ul → all lists inside the footer

When to use it
Use the descendant combinator when:

• You want all B elements inside A,
  regardless of depth
• The exact nesting doesn’t matter
• The meaning is stable
  (“links inside nav”)
• You want the selector to survive structural changes

When to avoid it
Avoid it when:

• You only want direct children
  (because A B will match grandchildren, great‑grandchildren, etc.)
• Nested elements would cause accidental matches
  (e.g., nested lists)
• You need precision
  (e.g., only the top‑level items)

AI‑steering cue:

“Use a descendant selector — 
I want all matching elements inside this container.”

Pattern: A > B
Meaning: “Select B only if it is a direct child of A.”

Example:

• ul > li → only the top‑level list item(s).

When to use it

• When you want only direct children
• When nested structures exist
• When precision matters

When to avoid it

• When the structure may change
• When deeper elements should also be included
• When flexibility is more important than strict hierarchy

AI‑steering cue:

“Use a child selector — 
only the direct children should match.”

Before we begin section 4, it helps to know that CSS has two sibling combinators:

• Adjacent sibling (A + B) — matches the next sibling
• General sibling (A ~ B) — matches all later siblings

We’ll start with the adjacent sibling combinator.
The general sibling version follows next on section 5.

Pattern: A + B
Meaning: “Select B only if it immediately follows A.”

Example:

• h2 + p → the first paragraph right after a heading.

When to use it

• When the next element matters
• When styling the first item after something
• When the relationship is sequential

When to avoid it:

• When the element might not be adjacent
• When the structure is unpredictable
• When multiple elements follow and all should match

AI‑steering cue:

“Use an adjacent sibling selector — 
style only the element that comes right after.”

Pattern: A ~ B
Meaning: “Select all B elements that share the same parent as A
and appear later in that parent’s list of children —
not just the next one”.

Example:

• h2 ~ p → all paragraphs that follow the heading within the same parent

When to use it

• When order matters but adjacency doesn’t
• When multiple elements follow the same anchor
• When you want to style a group based on what came before

When to avoid it

• When the relationship is too broad
• When precision is required
• When selecting too many elements would cause issues

AI‑steering cue:

“Use a general sibling selector — 
match all following siblings, not just the first.”

Combinators let us style based on:

• structure
• relationships
• context
• meaning

Without adding extra classes.

They help us express intent clearly
— something AI responds to well.

AI‑steering cue:

“Use a combinator to express the relationship 
instead of adding more markup.”

Think of combinators as prepositions:

• inside (A B)
• directly inside (A > B)
• right after (A + B)
• somewhere after (A ~ B)

They describe how elements relate in the DOM.

Once we understand these four relationships,
we can read almost any selector AI produces —
and request changes with clarity.

• Suggested Next Reading: Attribute Selectors — Targeting Elements by Their Properties

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←