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

1. 1

   Style a Form Group When Its Input Is Invalid

   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.

   html — HTML structureCopy

   <div class="form-group">
     <label for="email">Email</label>
     <input id="email" type="email" required />
     <span class="error-msg">Invalid email address</span>
   </div>

   css — CSSCopy

   .form-group:has(input:invalid) {
     border-color: #e53e3e;
     background-color: #fff5f5;
   }
   
   .form-group:has(input:invalid) label {
     color: #e53e3e;
   }
   
   .form-group:has(input:invalid) .error-msg {
     display: block;
   }

2. 2

   Highlight a Nav Item Containing the Active Link

   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> (awkward with React Router and Next.js <Link>).

   html — HTML structureCopy

   <nav>
     <ul>
       <li><a href="/blog" class="active">Articles</a></li>
       <li><a href="/tools">Tools</a></li>
     </ul>
   </nav>

   css — CSSCopy

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

3. 3

   Cards That Adapt Layout to Their Own Content

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

   html — HTML structureCopy

   <!-- Card with image (gets grid layout) -->
   <div class="card">
     <img src="..." alt="..." />
     <div class="card-body">...</div>
   </div>
   
   <!-- Text-only card (gets centered layout) -->
   <div class="card">
     <div class="card-body">...</div>
   </div>

   css — CSSCopy

   .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;
   }

4. 4

   Lock Body Scroll When a Modal Is Open

   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.

   html — HTML structureCopy

   <dialog id="my-modal">
     <p>Modal content</p>
     <button onclick="document.getElementById('my-modal').close()">Close</button>
   </dialog>

   css — CSSCopy

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

5. 5

   Dim All Sibling Cards Except the Hovered One

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

   html — HTML structureCopy

   <div class="grid">
     <div class="card">Card 1</div>
     <div class="card">Card 2</div>
     <div class="card">Card 3</div>
   </div>

   css — CSSCopy

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

6. 6

   Style a Label When Its Checkbox Is Checked

   Custom checkbox styling without JavaScript. Two HTML patterns (input nested inside label, or input and label as siblings) each has the right CSS approach:

   html — HTML: input nested inside labelCopy

   <label>
     <input type="checkbox" /> Remember me
   </label>

   css — CSS: use :has() for nested inputCopy

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

   html — HTML: input and label as siblingsCopy

   <input id="remember" type="checkbox" />
   <label for="remember">Remember me</label>

   css — CSS: use adjacent sibling for sibling labelCopy

   input[type="checkbox"]:checked + label {
     color: #2b6cb0;
   }

7. 7

   Different Grid Columns Based on Item Count

   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.

   html — HTML structureCopy

   <ul class="grid">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
   </ul>

   css — CSSCopy

   /* 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;
   }

8. 8

   Show a Clear Button Only When the Input Has Content

   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.

   html — HTML structureCopy

   <div class="input-wrapper">
     <input type="text" placeholder="Search..." />
     <button class="clear-btn" aria-label="Clear search">✕</button>
   </div>

   css — CSSCopy

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

Driving Form Validation Entirely From CSS

/* Fade the submit affordance while any control in the form is invalid */
form:has(:invalid) button[type="submit"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Error summary appears only after the user has actually tried a field */
form:has(:user-invalid) .error-summary {
  display: block;
}

/* Confirmation state once nothing in the form is invalid */
form:not(:has(:invalid)) .form-status {
  color: #276749;
}

/* Mark required labels without touching the markup */
.form-group:has(input:required) label::after {
  content: " *";
  color: #e53e3e;
}

/* Radio card highlights itself when the input inside it is selected */
.radio-card:has(input[type="radio"]:checked) {
  border-color: #2b6cb0;
  box-shadow: 0 0 0 2px #bee3f8;
}

/* Follow-up field is hidden unless the "other" option is picked */
.shipping-options:not(:has(input[value="other"]:checked)) .other-details {
  display: none;
}

/* Dim an entire row when its control is disabled */
.form-row:has(input:disabled) {
  opacity: 0.6;
  pointer-events: none;
}

/* Tri-state select-all in a table header */
thead:has(input:indeterminate) .select-all-hint {
  display: inline;
}

Quantity Queries and Child-Type Queries

/* When there are 5 or more items, shrink every item.
   Note what is missing: no way to change the list itself. */
.tag-list > li:nth-last-child(n + 5),
.tag-list > li:nth-last-child(n + 5) ~ li {
  font-size: 0.8rem;
  padding-inline: 0.4rem;
}

/* 5 or more children */
.tag-list:has(> li:nth-child(5)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

/* Exactly 2 children */
.tag-list:has(> li:nth-child(2)):not(:has(> li:nth-child(3))) {
  display: flex;
  justify-content: space-between;
}

/* Fewer than 4 children */
.tag-list:not(:has(> li:nth-child(4))) {
  max-width: 32rem;
  margin-inline: auto;
}

/* No children at all */
.tag-list:not(:has(> li)) {
  display: none;
}

/* An odd number of children, if you need the last one to span */
.tag-list:has(> li:last-child:nth-child(odd)) > li:last-child {
  grid-column: 1 / -1;
}

/* Video cards get a fixed aspect ratio, image cards do not */
.card:has(> video) {
  aspect-ratio: 16 / 9;
}

/* A card carrying both media and a heading needs more breathing room */
.card:has(> img):has(> h3) {
  padding-block: 1.25rem;
}

/* Any heading level, without repeating the rule */
.card:has(> :is(h2, h3, h4)) {
  padding-top: 0.5rem;
}

/* Figures behave differently once they carry a caption */
figure:has(> figcaption) {
  margin-block-end: 2rem;
}

/* Layout grid reacts to whether a sidebar was actually rendered */
.layout:has(> aside) {
  display: grid;
  grid-template-columns: 1fr 18rem;
  gap: 2rem;
}

Combining :has() With :not() and What It Does to Specificity

/* Specificity 1,1,0 for everything this matches: hard to override later */
.card:has(.badge, #promo) {
  border-color: #2b6cb0;
}

/* Specificity 0,1,0: same match, much easier to live with */
.card:has(:where(.badge, #promo)) {
  border-color: #2b6cb0;
}

/* Gallery whose descendants are all images and nothing else */
.gallery:not(:has(:not(img))) {
  padding: 0;
  gap: 2px;
}

/* Row that contains at least one checked box but no disabled one */
tr:has(input:checked):not(:has(input:disabled)) {
  background-color: #ebf8ff;
}

Pattern Quick Reference

Performance Considerations

• 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.

<!-- Tailwind v4 has-* variant -->
<div class="has-[input:invalid]:border-red-500 has-[input:invalid]:bg-red-50">
  <input type="email" required />
</div>

/* Invalid: the whole rule is discarded */
.card:has(.media:has(video)) { border: 2px solid red; }

/* Valid: one :has() with a descendant selector expresses the same condition */
.card:has(.media video) { border: 2px solid red; }

/* Valid: several :has() in one selector, none inside another's parentheses */
.layout:has(> aside) .card:has(img) { padding: 0; }

/* Mark a label whose input is required */
label:has(+ input:required)::after {
  content: " *";
  color: #dc2626;
}

/* Tighten spacing on a heading that sits directly above a code block */
h3:has(+ pre) { margin-bottom: 0.25rem; }

/* Any paragraph followed later by a figure in the same parent */
article p:has(~ figure) { margin-bottom: 0.5rem; }