:has(:nth-child())

A layout that changes when the list gets long

CaveatA quantity query counts children, so it re-runs whenever the list changes. Keep the threshold to one breakpoint: chaining several counts makes the layout jump twice while items are still loading in.

FallbackYou cannot nest :has() inside :has(), and it will not match pseudo-elements. Both are silent failures — the rule is simply dropped.

/* four or more, go two across */
.list:has(li:nth-child(4)) {
  grid-template-columns: 1fr 1fr;
}

Published 3 Aug 2026