BaselineLab
0Support

Combinators and relationships

Compare depth and sibling relationships across three HTML scenarios and inspect exactly which elements each combinator selects.

Guide

Ask AI

Combinators and relationships

Response generated with openai/gpt-5.4-nano. AI can make mistakes. Always review the result.
Current selector.article p
Support unknownSpecificity—

Preparing the scenario and its results…

Selects targets at any depth inside the container.

Selector preview

Relationships in an article

Direct introduction.

Direct paragraph after the introduction.

Final paragraph in the article.

HTML
<article class="article" aria-label="Article structure about combinators">
  <h3>Relationships in an article</h3>
  <p class="lead">Direct introduction.</p>
  <p>Direct paragraph after the introduction.</p>
  <aside class="note">
    <p>Paragraph nested inside a note.</p>
  </aside>
  <p>Final paragraph in the article.</p>
</article>
CSS
.article p {
  outline: 3px solid #f97316;
  outline-offset: 3px;
  background-color: color-mix(in oklch, #f97316 16%, transparent);
}

CSS combinators guide

Understand how elements relate

Distinguish depth, direct parentage, and sibling order without confusing the reference element with the selected element.

Back to playground

How to read a relationship

A combinator connects two compound selectors and requires their elements to hold a particular relationship in the document tree.

A combinator B

The right-hand side is the target

In A combinator B, the rule selects B. A provides the context B needs in order to match.

A B · A > B

Depth or direct parentage

Whitespace allows any number of levels; > requires A to be the immediate parent of B.

A + B · A ~ B

Same parent and later order

+ requires the next element sibling; ~ allows intervening siblings but never searches backwards.

Tree and depth

Compare any descendant with children that depend directly on a container.

Descendant

E F

Selects B when it is found at any level inside an ancestor A.

Specificity(0, 0, 2)
Important behavior
  • The combinator is one or more CSS whitespace characters between two compound selectors.
  • The relationship can cross any number of intermediate elements.
Selector and HTML examples
SelectorSpecificity(0, 1, 1)
.article p
HTML
<article class="article">
Matches:   <p>Matches</p>
  <section>
Matches:     <p>Matches</p>
  </section>
</article>
<p>Does not match</p>
SelectorSpecificity(0, 1, 1)
.menu a
HTML
<nav class="menu">
Matches:   <a>Matches</a>
  <span>
Matches:     <a>Matches</a>
  </span>
</nav>
<a>Does not match</a>
Common conceptual mistakes
  • Treating whitespace as optional formatting changes the selector meaning.
  • It is not equivalent to a direct child: grandchildren and deeper descendants also match.
Read the complete definitionOpens in a new tab

Direct child

E > F

Selects B only when its immediate element parent matches A.

Specificity(0, 0, 2)
Important behavior
  • Whitespace around > is optional and does not change the relationship.
  • Descendants two or more levels deep are excluded from the match.
Selector and HTML examples
SelectorSpecificity(0, 1, 1)
.article > p
HTML
<article class="article">
Matches:   <p>Matches</p>
  <section>
    <p>Does not match</p>
  </section>
</article>
SelectorSpecificity(0, 1, 1)
.menu > a
HTML
<nav class="menu">
Matches:   <a>Matches</a>
  <span>
    <a>Does not match</a>
  </span>
Matches:   <a>Matches</a>
</nav>
Common conceptual mistakes
  • It does not select the first child; position requires structural pseudo-classes.
  • B appearing visually inside A does not guarantee A is its direct DOM parent.
Read the complete definitionOpens in a new tab

Sibling order

Compare the immediate element sibling with every matching sibling that appears later.

Adjacent sibling

E + F

Selects B when it shares a parent with A and is its next element sibling.

Specificity(0, 0, 2)
Important behavior
  • Text nodes and comments between the elements do not break element adjacency.
  • It selects B, not the A element used as the reference.
Selector and HTML examples
SelectorSpecificity(0, 0, 2)
h2 + p
HTML
<section>
  <h2>CSS</h2>
Matches:   <p>Matches</p>
  <p>Does not match</p>
</section>
SelectorSpecificity(0, 1, 1)
.current + a
HTML
<nav>
  <a class="current">Actual</a>
Matches:   <a>Matches</a>
  <span>
    <a>Does not match</a>
  </span>
</nav>
Common conceptual mistakes
  • Visual proximity created by CSS is irrelevant; DOM order is evaluated.
  • Only one B can match for each A because the next element sibling is required.
Read the complete definitionOpens in a new tab

Subsequent siblings

E ~ F

Selects every B after A when both share the same parent.

Specificity(0, 0, 2)
Important behavior
  • Other elements may appear between A and each matching B.
  • The relationship is directional: it never selects siblings before A.
Selector and HTML examples
SelectorSpecificity(0, 0, 2)
h2 ~ p
HTML
<section>
  <h2>CSS</h2>
Matches:   <p>Matches</p>
  <aside>Nota</aside>
Matches:   <p>Matches</p>
</section>
SelectorSpecificity(0, 1, 1)
.current ~ a
HTML
<nav>
  <a class="current">Actual</a>
Matches:   <a>Matches</a>
  <span>
    <a>Does not match</a>
  </span>
Matches:   <a>Matches</a>
</nav>
Common conceptual mistakes
  • It does not select every sibling, only later B elements that match the right-hand selector.
  • It does not reach descendants of an intermediate sibling because B must share A’s parent.
Read the complete definitionOpens in a new tab