11. Selectors — A Summary of What They Can and Cannot Do

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

CSS selectors are powerful, but they are not universal.
They can move down the DOM tree and forward through siblings — but they cannot move up, backward, or sideways in certain ways.

Understanding these boundaries helps us:

• avoid frustration
• guide AI more clearly
• choose the right tool for the job
• know when markup or classes are needed
• keep our mental model simple and evergreen

This page gives us a clear sense of what CSS selectors cannot do —
and why those limitations exist.

And beneath all of it sits one quiet truth:

CSS can style anything —
but we must give it a way to target it.

Selectors can target:

• an element
• its children
• its descendants
• its later siblings

But selectors cannot target a parent.

We cannot write:

p:parent
.child ^ .parent

CSS has no mechanism to “climb upward.”

—

If we need to style a parent based on something inside it,
we must:

• add a class to the parent
• restructure the markup
• or use JavaScript

AI‑steering cue:

“CSS selectors can’t select parents — 
add a class to the parent instead.”

Selectors can move forward through siblings:

A + B   → next sibling  
A ~ B   → all later siblings

But they cannot move backward.

CSS selectors can only match siblings that appear later in the parent’s list of children — never earlier ones.

Example of what CSS cannot do:

p ~ h2   ← impossible

Why this matters

If we need to style something based on what comes before it,
we must:

• add a class
• adjust the markup order
• or use JavaScript

AI‑steering cue:

“CSS selectors can only select later siblings — 
not earlier ones.”

CSS can match:

• attributes
• states
• structure
• relationships

…but it cannot match text.

This does not exist:

p:contains("Warning")

Why this matters

If we need to style based on content, we must:

• add a class
• preprocess the HTML
• or use JavaScript

AI‑steering cue:

“CSS selectors can’t match text — 
use a class to express meaning.”

Selectors operate on:

• the DOM
• attributes
• pseudo‑states

…but not on:

• computed width
• computed height
• layout position
• visibility
• rendered text

This does not exist:

div:width-greater-than(200px)

Why this matters

If we need layout‑dependent styling, we must:

• use media queries
• use container queries
• or adjust the markup

AI‑steering cue:

“Selectors can’t see computed values — 
use a query instead.”

CSS understands only:

A + B   → the next sibling  
A ~ B   → all later siblings

It cannot select:

the second next sibling

the third next sibling

a sibling that appears earlier

a sibling in a different parent Why this matters

If we need to target a specific element in a sequence,
we must:

• add a class
• use :nth-child()
• or adjust the markup

AI‑steering cue:

“CSS can only move forward through siblings — 
not backward or arbitrarily.”

CSS selectors were designed to be:

• fast
• predictable
• one‑directional
• safe for large documents

They intentionally avoid patterns that require:

• backtracking
• scanning upward
• evaluating content
• computing layout

This keeps CSS selectors simple, stable, and evergreen.

CSS selectors can:

• move down the tree
• move forward through siblings
• match attributes
• match states
• match structural conditions
• style parts of an element (pseudo‑elements)
• respond to conditions (pseudo‑classes)

CSS selectors cannot:

• move up the tree
• move backward through siblings
• match text
• match computed values
• select arbitrary elements outside structural rules

Once we internalize this,
we stop fighting CSS
and start working with it.

• Suggested Next Reading: Layout

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←