8 CSS :has() Patterns You'll Actually Use (2026)

The classic problem: you want the label, border, and error state on a .form-group to turn red when the <input> inside it fails validation. Before :has(), this required JavaScript to add a class to the parent element.

.form-group:has(input:invalid) {
  border-color: #e53e3e;
  background-color: #fff5f5;
}

.form-group:has(input:invalid) label {
  color: #e53e3e;
}

You have a <li> wrapping each <a> in your navigation. You want the entire <li> to appear active. Without :has(), you'd need the active class on the <li>, not the <a> — which is awkward with React Router and Next.js <Link>.

nav li:has(a.active) {
  background-color: #ebf8ff;
  border-radius: 6px;
}

nav li:has(a.active) a {
  font-weight: 600;
  color: #2b6cb0;
}

Cards with images need a different layout than text-only cards. Previously this meant JavaScript at render time or separate component variants with different class names.

.card {
  padding: 1.25rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.card:has(img) {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1rem;
}

.card:not(:has(img)) {
  max-width: 420px;
  text-align: center;
}

One line. No JavaScript. The moment a <dialog> element with the open attribute exists anywhere in the page, scrolling stops. When the dialog closes, scrolling returns automatically.

body:has(dialog[open]) {
  overflow: hidden;
}

Hover over a card in a grid and the other cards visually recede. Previously this required JavaScript mouseover event handlers on every card.

.grid:has(.card:hover) .card:not(:hover) {
  opacity: 0.5;
  transform: scale(0.98);
  transition: opacity 150ms ease, transform 150ms ease;
}

Custom checkbox styling without JavaScript. The label containing or adjacent to a checked checkbox styles itself directly:

• The :has() version works when the <input> is nested inside the <label> element.
• The + adjacent sibling version works when <input> and <label> are siblings — no :has() needed for that specific pattern.
• Both work for radio buttons, toggle switches, and any <input> with a :checked state.

label:has(input[type="checkbox"]:checked) {
  font-weight: 600;
  color: #2b6cb0;
  text-decoration: line-through;
}

/* For adjacent label pattern */
input[type="checkbox"]:checked + label {
  color: #2b6cb0;
}

Three columns when there are many items, a centered single column when there are only one or two. The grid reads its own children and adjusts — quantity queries in pure CSS.

/* Three-column layout when at least 3 items exist */
.grid:has(:nth-child(3)) {
  grid-template-columns: repeat(3, 1fr);
}

/* Single centered column when fewer than 3 items */
.grid:not(:has(:nth-child(3))) {
  grid-template-columns: 1fr;
  max-width: 400px;
  margin: 0 auto;
}

A text input with an inline clear button that only appears when the field contains text. :placeholder-shown is false when the input has a value — no JavaScript needed.

.input-wrapper .clear-btn {
  display: none;
}

.input-wrapper:has(input:not(:placeholder-shown)) .clear-btn {
  display: flex;
  align-items: center;
}

:has() is production-ready, but a few patterns create unnecessary style recalculations. The rule: keep selectors scoped.

• Avoid body:has(:hover) — it recalculates styles on every mousemove across the entire page. Scope to the specific container instead.
• Prefer direct child selectors (:has(> .child)) over descendant selectors (:has(.child)) when you know the exact DOM structure. It's faster and more explicit.
• Avoid deeply chained :has() inside :has() — browsers handle it, but readability suffers quickly.