How to Use the CSS :has() Selector (2026 Guide)
The parent selector CSS always needed. Select elements based on children, siblings, and descendants.
- The parent selector CSS always needed.
- What :has() Does.
- Practical Use Cases.
- Performance Considerations.
- Browser Support.
What :has() Does
The :has() selector lets you select an element based on what it contains. For decades, CSS could only select downward (parent → child) and sideways (siblings). There was no way to style a parent based on children without JavaScript. :has() changes that. div:has(> img) matches any div containing a direct child image. form:has(:invalid) matches forms with invalid inputs. h2:has(+ p) matches h2 followed by a paragraph.
Practical Use Cases
Practical examples: style cards based on content — .card:has(img) gets different layout. Highlight form groups with errors — .form-group:has(:invalid) gets red border. Show chevrons on nav items with dropdowns. Toggle panels based on checkbox state — .panel:has(#toggle:checked) expands. Quantity-based layouts — ul:has(li:nth-child(4)) switches to grid at 4+ items. These eliminate JavaScript previously needed for parent-aware styling.
Performance Considerations
Keep :has() selectors specific — use direct child (>) over descendant (space) when possible. Browser engines have optimized significantly and performance issues are rare except in extreme cases. Profile if you suspect problems, but don’t avoid :has() preemptively — it’s fast for virtually all real-world use.
Browser Support
Supported in Chrome 105+, Safari 15.4+, Firefox 121+, Edge 105+. Global support exceeds 93%. Unsupported browsers simply ignore :has() rules — elements display without conditional styling. Safe for progressive enhancement. For critical layouts, provide a baseline without :has() and enhance with it.