BaselineLab
0Support

Structural selectors

Select roots, empty elements, and sibling positions; compare An+B, reverse counting, and of filters.

Guide

Ask AI

Structural selectors

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

Preparing the scenario and its results…

Selects the test containers that have no element children or text nodes that prevent a match.

Selector preview

Represented document root

Four cases for :empty

Truly empty

Comment only

Whitespace only

Text content

This container has text
  1. Case 1
  2. Alternative 2
  3. Case 3
  4. Case 4
  5. Alternative 5

One paragraph among other types

Only child in this container

Siblings of mixed types

Case A

Case B

Case C

HTML
<section class="document-root" aria-label="Scenario comparing four kinds of content for :empty">
  <header>
    <p>Represented document root</p>
    <h3>Four cases for :empty</h3>
  </header>
  <div class="empty-cases">
    <article>
      <h3>Truly empty</h3>
      <div class="slot"></div>
    </article>
    <article>
      <h3>Comment only</h3>
      <div class="slot"><!-- comment --></div>
    </article>
    <article>
      <h3>Whitespace only</h3>
      <div class="slot">
      </div>
    </article>
    <article>
      <h3>Text content</h3>
      <div class="slot">This container has text</div>
    </article>
  </div>
  <ol class="sequence structure-list">
    <li class="featured">Case 1</li>
    <li>Alternative 2</li>
    <li class="featured" data-current>Case 3</li>
    <li class="featured">Case 4</li>
    <li>Alternative 5</li>
  </ol>
  <aside class="single">
    <p>Only child in this container</p>
  </aside>
  <section class="single-type">
    <h3>One paragraph among other types</h3>
    <p>Only child in this container</p>
    <aside>Alternative</aside>
  </section>
  <div class="mixed">
    <h3>Siblings of mixed types</h3>
    <p>Case A</p>
    <aside>Alternative</aside>
    <p>Case B</p>
    <p>Case C</p>
  </div>
</section>
CSS
.slot:empty {
  outline: 3px solid #f97316;
  outline-offset: 3px;
  background-color: color-mix(in oklch, #f97316 16%, transparent);
}

CSS structural selector guide

Read the structure before counting positions

Distinguish empty content, global position, and type position; build An+B formulas and understand when of changes the counted list.

Back to playground

Four ideas before counting siblings

Structural pseudo-classes evaluate the document tree, not the visual layout created by CSS.

An+B

An+B generates positions

A sets the step and B the starting point; n takes integers from zero that produce positive indices. The odd and even keywords are equivalent to 2n+1 and 2n.

of <selector-list>

of filters before counting

In :nth-child() and :nth-last-child(), the optional list first reduces the sibling candidates.

:nth-last-…

last reverses the direction

The nth-last variants count from the end without reversing DOM order.

:…-of-type

of-type separates by name

Only siblings with the same element type as the subject compete.

Root and absence of content

:root identifies the document root and :empty checks whether an element lacks relevant children.

:root

Selects the root element of the document tree.

Specificity(0, 1, 0)
Important behavior
  • In an HTML document it normally matches html; in standalone SVG it matches svg.
  • The playground represents that root with its outer frame because the preview lives inside the BaselineLab document.
Selector and HTML examples
SelectorSpecificity(0, 1, 0)
:root
HTML
Matches: <html lang="es">
  <body>...</body>
</html>
SelectorSpecificity(0, 1, 0)
:root
HTML
Matches: <svg xmlns="http://www.w3.org/2000/svg">
  <circle />
</svg>
Common conceptual mistakes
  • It is not always equivalent to html because it depends on the document language.
  • It does not select the root of every nested component or section.
Read the full definitionOpens in a new tab

:empty

Selects elements without element children or text content that counts for matching.

Specificity(0, 1, 0)
Important behavior
  • Comments do not prevent a match; an element child does.
  • The preview shows the browser’s real result, including the whitespace case that Selectors Level 4 is evolving.
Selector and HTML examples
SelectorSpecificity(0, 2, 0)
.slot:empty
HTML
Matches: <div class="slot"></div>
<div class="slot">CSS</div>
SelectorSpecificity(0, 1, 1)
p:empty
HTML
Matches: <p><!-- Comment --></p>
<p><span></span></p>
SelectorSpecificity(0, 1, 1)
li:empty
HTML
<ul>
Matches:   <li></li>
  <li>Item</li>
</ul>
Common conceptual mistakes
  • An element containing spaces may look empty and fail to match in current implementations.
  • A replaced element such as img may match even though it renders its own content.
Read the full definitionOpens in a new tab

Position among element children

Count every element sibling or a list previously filtered with of.

:first-child

Selects an element when it is its parent’s first element child.

Specificity(0, 1, 0)
Important behavior
  • Text nodes and comments do not occupy positions.
  • It can be combined with a type or class to restrict the subject.
Selector and HTML examples
SelectorSpecificity(0, 1, 1)
li:first-child
HTML
<ul>
Matches:   <li>Uno</li>
  <li>Dos</li>
</ul>
SelectorSpecificity(0, 1, 1)
article > :first-child
HTML
<article>
Matches:   <h2>Title</h2>
  <p>Text</p>
</article>
Common conceptual mistakes
  • It does not mean the first element of that type; use :first-of-type for that.
  • Grid or Flexbox visual ordering does not change structural order.
Read the full definitionOpens in a new tab

:last-child

Selects an element when it is its parent’s last element child.

Specificity(0, 1, 0)
Important behavior
  • It evaluates DOM order, not the painted position.
  • It does not require explicitly writing the parent selector.
Selector and HTML examples
SelectorSpecificity(0, 1, 1)
li:last-child
HTML
<ul>
  <li>Uno</li>
Matches:   <li>Dos</li>
</ul>
SelectorSpecificity(0, 1, 1)
section > :last-child
HTML
<section>
  <p>Text</p>
Matches:   <footer>Footer</footer>
</section>
Common conceptual mistakes
  • It is not equivalent to :last-of-type when a sibling of another type follows.
  • A later text node does not stop it being the last element child.
Read the full definitionOpens in a new tab

:only-child

Selects an element with no element siblings.

Specificity(0, 1, 0)
Important behavior
  • It is equivalent to combining :first-child:last-child.
  • Text and comments in the parent do not count as element siblings.
Selector and HTML examples
SelectorSpecificity(0, 1, 1)
p:only-child
HTML
<aside>
Matches:   <p>Only</p>
</aside>
<aside>
  <p>One</p>
  <p>Two</p>
</aside>
SelectorSpecificity(0, 2, 0)
.card > :only-child
HTML
<article class="card">
Matches:   <img alt="Cover" />
</article>
Common conceptual mistakes
  • It does not require the parent to contain nothing except the subject.
  • It is not equivalent to :only-of-type when siblings of other types exist.
Read the full definitionOpens in a new tab

:nth-child()

:nth-child(An+B [of S]?)

Selects An+B positions among element children, optionally filtered by of.

Specificity(0, 1, 0)
Important behavior
  • odd equals 2n+1 and even equals 2n; -n+3 limits the result to the first three positions.
  • With of S, siblings are filtered first and the remainder is then numbered.
Selector and HTML examples
SelectorSpecificity(0, 1, 1)
li:nth-child(2n + 1)
HTML
<ol>
Matches:   <li>1</li>
  <li>2</li>
Matches:   <li>3</li>
</ol>
SelectorSpecificity(0, 2, 1)
li:nth-child(-n + 3 of .featured)
HTML
<ol>
Matches:   <li class="featured">A</li>
  <li>B</li>
Matches:   <li class="featured">C</li>
Matches:   <li class="featured">D</li>
  <li class="featured">E</li>
</ol>
Common conceptual mistakes
  • :nth-child(2 of .featured) is not equivalent to .featured:nth-child(2).
  • n starts at zero, but only final positive indices match.
Relevant support

This Baseline status covers the of <selector-list> syntax, which is newer than :nth-child() without a filter.

Read the full definitionOpens in a new tab

:nth-last-child()

:nth-last-child(An+B [of S]?)

Selects An+B positions while counting element children from the end.

Specificity(0, 1, 0)
Important behavior
  • It accepts the same of clause as :nth-child() and filters before counting.
  • The counting direction changes, but elements keep their DOM order.
Selector and HTML examples
SelectorSpecificity(0, 1, 1)
li:nth-last-child(2)
HTML
<ol>
  <li>1</li>
Matches:   <li>2</li>
  <li>3</li>
</ol>
SelectorSpecificity(0, 2, 1)
li:nth-last-child(2n of .featured)
HTML
<ol>
  <li class="featured">A</li>
  <li>B</li>
Matches:   <li class="featured">C</li>
  <li class="featured">D</li>
</ol>
Common conceptual mistakes
  • It does not select the last n elements unless the formula expresses that range.
  • The of filter belongs inside the argument, not outside the pseudo-class.
Relevant support

This Baseline status covers the of <selector-list> filter used during reverse counting.

Read the full definitionOpens in a new tab

Position among siblings of the same type

Ignore siblings of other types when deciding whether the subject is first, last, only, or an An+B position.

:first-of-type

Selects the first sibling of its element type.

Specificity(0, 1, 0)
Important behavior
  • Siblings of other types may precede it and it can still match.
  • The type comes from the compound selector containing the pseudo-class.
Selector and HTML examples
SelectorSpecificity(0, 1, 1)
p:first-of-type
HTML
<article>
  <h2>Title</h2>
Matches:   <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</article>
SelectorSpecificity(0, 1, 1)
img:first-of-type
HTML
<figure>
  <span>Gallery</span>
Matches:   <img alt="First" />
  <img alt="Second" />
</figure>
Common conceptual mistakes
  • It does not mean the parent’s first child.
  • It does not count classes as distinct types.
Read the full definitionOpens in a new tab

:last-of-type

Selects the last sibling of its element type.

Specificity(0, 1, 0)
Important behavior
  • Siblings of other types may follow it.
  • Counting compares element names, not roles or styles.
Selector and HTML examples
SelectorSpecificity(0, 1, 1)
p:last-of-type
HTML
<article>
  <p>First</p>
  <aside>Note</aside>
Matches:   <p>Last</p>
</article>
SelectorSpecificity(0, 1, 1)
button:last-of-type
HTML
<nav>
  <button>Previous</button>
  <a href="#">Help</a>
Matches:   <button>Next</button>
</nav>
Common conceptual mistakes
  • It is not equivalent to :last-child.
  • Changing visual order does not change which element matches.
Read the full definitionOpens in a new tab

:only-of-type

Selects an element with no siblings of the same type.

Specificity(0, 1, 0)
Important behavior
  • Any number of siblings of other types may coexist with it.
  • It is equivalent to :first-of-type:last-of-type.
Selector and HTML examples
SelectorSpecificity(0, 1, 1)
p:only-of-type
HTML
<article>
  <h2>Title</h2>
Matches:   <p>Only paragraph</p>
  <aside>Note</aside>
</article>
SelectorSpecificity(0, 1, 1)
img:only-of-type
HTML
<figure>
Matches:   <img alt="Only image" />
  <figcaption>Caption</figcaption>
</figure>
Common conceptual mistakes
  • It does not require being an only child.
  • A different class does not create a different element type.
Read the full definitionOpens in a new tab

:nth-of-type()

:nth-of-type(An+B)

Selects An+B positions among siblings of the same type.

Specificity(0, 1, 0)
Important behavior
  • Siblings of other types are omitted before numbering.
  • It accepts odd, even, numbers, and An+B formulas, but not an of clause.
Selector and HTML examples
SelectorSpecificity(0, 1, 1)
p:nth-of-type(2n)
HTML
<article>
  <p>1</p>
  <aside>Note</aside>
Matches:   <p>2</p>
  <p>3</p>
Matches:   <p>4</p>
</article>
SelectorSpecificity(0, 1, 1)
h2:nth-of-type(2)
HTML
<main>
  <h2>First</h2>
  <p>Text</p>
Matches:   <h2>Second</h2>
</main>
Common conceptual mistakes
  • It is not shorthand for :nth-child(... of type) in every complex composition.
  • The type is determined by the element name, not a class.
Read the full definitionOpens in a new tab

:nth-last-of-type()

:nth-last-of-type(An+B)

Selects same-type An+B positions while counting from the end.

Specificity(0, 1, 0)
Important behavior
  • It omits other types and starts numbering at the subject type’s last sibling.
  • It uses the same An+B microsyntax as the other nth variants.
Selector and HTML examples
SelectorSpecificity(0, 1, 1)
p:nth-last-of-type(2)
HTML
<article>
  <p>1</p>
  <aside>Note</aside>
Matches:   <p>2</p>
  <p>3</p>
</article>
SelectorSpecificity(0, 1, 1)
img:nth-last-of-type(odd)
HTML
<figure>
Matches:   <img alt="1" />
  <span>Separator</span>
  <img alt="2" />
Matches:   <img alt="3" />
</figure>
Common conceptual mistakes
  • It does not count every child from the end.
  • It does not accept of <selector-list>.
Read the full definitionOpens in a new tab