The :has() selector enables styling parent elements based on their children, finally bringing the "parent selector" to CSS. Here's how to use it.
Basic Syntax#
Loading code block...
Form Validation#
Loading code block...
Card Layouts#
Loading code block...
Navigation States#
Loading code block...
Table Styling#
Loading code block...
Sibling Selection#
Loading code block...
Quantity Queries#
Loading code block...
Dark Mode Detection#
Loading code block...
Modal and Overlay#
Loading code block...
Accordion/Disclosure#
Loading code block...
Empty States#
Loading code block...
Filter UI#
Loading code block...
Responsive Behavior#
Loading code block...
Complex Combinations#
Loading code block...
Performance Tips#
Loading code block...
Best Practices#
Use Cases:
✓ Parent styling based on children
✓ Form validation states
✓ Dynamic layouts
✓ Sibling relationships
✓ State-based styling
Performance:
✓ Be specific with selectors
✓ Use direct child (>) when possible
✓ Combine with class selectors
✓ Avoid overly broad :has()
Patterns:
✓ Form group validation
✓ Card content detection
✓ Navigation active states
✓ Empty/loading states
Browser Support:
✓ Check caniuse.com
✓ Provide fallbacks
✓ Use @supports for detection
✓ Progressive enhancement
Conclusion#
The :has() selector revolutionizes CSS by enabling parent selection based on descendants. Use it for form validation styling, dynamic layouts based on content, navigation states, and quantity queries. Combine with :not() for inverse selection and be mindful of performance by keeping selectors specific. This powerful selector eliminates many JavaScript-based styling solutions while keeping styles declarative and maintainable.