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

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>