The :has() selector styles elements based on their descendants. It's the long-awaited parent selector.
Basic Usage#
Loading code block...
Form Validation Styles#
Loading code block...
Card Layouts#
Loading code block...
Navigation#
Loading code block...
Checkbox and Radio Styling#
Loading code block...
Conditional Layouts#
Loading code block...
Sibling Styling#
Loading code block...
Empty State Handling#
Loading code block...
Media Queries with :has()#
Loading code block...
Quantity Queries#
Loading code block...
State-Based Theming#
Loading code block...
Modal and Dialog#
Loading code block...
Combining with Other Selectors#
Loading code block...
Performance Considerations#
Loading code block...
Browser Support Fallback#
Loading code block...
Best Practices#
Usage:
✓ Style parent based on child state
✓ Create conditional layouts
✓ Form validation feedback
✓ Interactive hover effects
Performance:
✓ Use direct child selectors (>)
✓ Be specific with element types
✓ Avoid deeply nested :has()
✓ Test performance impact
Accessibility:
✓ Ensure focus states are visible
✓ Don't hide important content
✓ Maintain keyboard navigation
✓ Test with screen readers
Conclusion#
The :has() selector enables parent styling based on descendants, something CSS couldn't do before. Use it for form validation, conditional layouts, and interactive effects. Be mindful of performance with complex selectors and provide fallbacks for older browsers.