How to style elements based on the number of children they have with CSS?

CSS cannot directly count children, but it can style parents based on child count using :has() with selectors like :first-child:last-child for exactly one child, :nth-child(N):last-child for exactly N children, or :nth-child(N) for at least N children—relying on existence checks rather than arithmetic.

You can’t directly count children with pure CSS, but you can style elements based on whether they have a specific number (or range) of children — using :nth-child(), :first-child, :last-child, and combinators. It’s limited, but practical for common cases like “only one child”, “exactly two”, or “more than three”.

Style an element that has exactly one child

This is the most reliable case: if an element has only one child, that child must be both the first and the last. So you can target it with :first-child:last-child.

:has(> :first-child:last-child) {
  border: 2px solid green;
}

Note: :has() is supported in modern browsers (Chrome 105 , Safari 15.4 , Firefox 121 ), but not in older ones. Without :has(), you’d need to style the *child* instead — e.g., > :first-child:last-child — which only works if you control the child’s styling, not the parent’s.

Style a parent when it has *at least* N children

CSS can’t express “≥ N”, but you can approximate it by checking if the *Nth* child exists — using the general sibling combinator ~. For example, to detect ≥ 3 children:

:has(> :nth-child(3)) {
  padding: 1rem;
}

This works because if there’s a third child, the selector matches. Same logic applies for ≥ 4 (:nth-child(4)), etc. Just remember: this only works with :has(). Without it, fallbacks require JavaScript or restructuring markup.

Style based on “only two children” or “exactly N”

For exactly two: the second child must exist (:nth-child(2)) and also be the last (:last-child). So:

:has(> :nth-child(2):last-child) {
  background-color: #f0f0f0;
}

For exactly three: use :nth-child(3):last-child. The pattern is consistent — but again, depends on :has(). Also note: :nth-child(N) counts *all* siblings, not just matching elements — so whitespace-only text nodes don’t interfere, but other elements (e.g., <span></span>, <div>) do count.<h3 id="What-breaks-it-and-what-to-watch-for">What breaks it — and what to watch for</h3> <p><code>:has() doesn’t work in pseudo-elements (::before, ::after), nor inside @keyframes or @media queries (yet). Also:

• Elements with display: contents children are *not* counted as children — their children become direct children of the parent
• Dynamic changes (e.g., adding/removing children via JS) trigger re-evaluation — but some older engines may lag or ignore updates
• If you need IE or pre-2022 browser support, you’ll need a data-child-count attribute updated via JavaScript

The real constraint isn’t syntax — it’s that CSS has no native counter. Everything hinges on existence checks, not arithmetic. That’s why “exactly N” always reduces to “Nth exists AND it’s last” — and why zero-child detection requires :empty, not :has().