CSS:has()SelectorsModern CSS

CSS :has() — The Parent Selector That Changes Everything

The :has() pseudo-class lets you select elements based on their children. It's CSS's long-awaited parent selector and enables patterns that previously required JavaScript.

U

UIXplor Team

February 25, 2026 · 6 min read

✦

01What :has() Does

`:has()` selects elements *that contain* a matching child:

css
/* Style a label whose checkbox is checked */
label:has(input:checked) { color: #B8FB3C; font-weight: 600; }

/* Style a card that has an image */
.card:has(img) { padding-top: 0; }

/* Style a form that has an invalid input */
form:has(:invalid) .submit-btn { opacity: 0.5; pointer-events: none; }

02Quantity Queries with :has()

Style a grid differently based on how many items it has:

css
.grid:has(:nth-child(4)) {
  grid-template-columns: repeat(2, 1fr);
}
.grid:has(:nth-child(5)) {
  grid-template-columns: repeat(3, 1fr);
}

This was called 'quantity queries' and required JavaScript or clever selector hacks before `:has()`.

03Form State Styling

css
/* Highlight a required field's wrapper */
.field:has(input[required]) label::after { content: ' *'; color: #ef4444; }

/* Show helper text when input is focused */
.field:has(:focus) .helper { display: block; }

/* Mark entire section as complete */
.step:has(input:valid, select:valid) .step-icon { color: #B8FB3C; }

Related UI Components

◈

Collections

All UI component collections

Back to Blog