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.