SVG Styling with :has()
:has() lets you select and style a parent element based on what SVG content or state exists within its children.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Selecting Parents Based on Contained SVG Content
The :has() pseudo-class allows a selector like .card:has(svg.warning-icon) { border-color: red; } to style a parent card element differently specifically when it contains a particular warning icon, something that previously required JavaScript to detect and toggle a class manually.
- Selects and styles a parent based on specific SVG content within its children
- Previously required JavaScript to detect content and toggle a class manually
- Enables purely CSS-driven conditional styling based on contained SVG elements
Practical :has() Patterns for SVG Icon States
:has() is particularly useful for styling a form field's container differently when it contains an error icon, highlighting a list item when it contains a specific status SVG, or adjusting a button's padding when an icon SVG is present versus a text-only button, all handled declaratively without JavaScript state management.
- Styles form field containers differently based on a contained error icon
- Highlights list items conditionally based on a specific status SVG present
- Adjusts layout like button padding based on whether an icon SVG exists
Frequently Asked Questions
Is :has() support solid enough to rely on for production styling?
Yes, :has() has gained solid support across current major browsers, making it reliable for production use, though checking your specific target browser matrix is always worthwhile.
Can :has() replace all JavaScript-based conditional SVG styling?
It replaces many common cases involving structural or content-based conditions, but truly dynamic state that depends on runtime data or user interaction beyond DOM structure still typically needs JavaScript.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG