🎯 Select Example
Basic: Card with image
.card:has(img) - Select cards containing images
Form: Empty input highlight
input:has(:placeholder-shown) - Select empty inputs
Nav: Active page item
li:has(a[aria-current]) - Select current nav item
Combo: Hover card effect
.card:has(.btn:hover) - Card changes on child hover
Sibling: Heading followed by paragraph
h2:has(+ p) - Select heading directly followed by p
Nested: Deep matching
.container:has(.active) - Select container with .active
📝 CSS Code Editor
👁️ Live Preview
This card contains an img tag
This card has no img tag
Also contains an img tag
No img but has other content
🌐 Browser Compatibility
Global support: 92%+ (2024)
📖 What is the CSS :has() Selector
The CSS :has() selector is a relational pseudo-class introduced in CSS Selectors Level 4, often called the "CSS parent selector." It allows you to select elements based on the content of their descendants or subsequent siblings, fundamentally changing CSS's top-down-only selection limitation.
Syntax
:has(selector-list) — The :has() pseudo-class matches when the element matches any selector in the list.
Common Patterns
- :has(child) — Select parent containing a specific child
- :has(+ sibling) — Select element directly followed by a specific sibling
- :has(~ sibling) — Select element followed by a specific sibling anywhere
- :not(:has(child)) — Select parent not containing a specific child
- :has(:hover) — Select element with a hovered descendant
Use Cases
- Card layouts: Auto-adjust styles for cards with images
- Form validation: Highlight empty inputs
- Navigation: Auto-mark current page
- Dark mode: Toggle based on child element state
- Responsive: Self-adaptive layout based on content
❓ FAQ
What is the CSS :has() selector?
:has() is a relational pseudo-class selector introduced in CSS Selectors Level 4. It allows selecting parent elements based on the existence of child elements or subsequent sibling elements. It is often called the 'parent selector' and is one of the most anticipated CSS features.
What is the browser compatibility of :has()?
:has() is supported by all major browsers: Chrome 105+, Firefox 121+, Safari 15.4+, Edge 105+. Global browser support exceeds 92%.
How is :has() different from regular CSS selectors?
Regular CSS selectors select top-down (parent to child), while :has() can select bottom-up (child to parent). For example, .card:has(img) selects .card elements that contain an img, which previously required JavaScript.
Does :has() affect performance?
:has() performs well in simple scenarios. However, complex :has() nesting (like :has(:has())) or usage on large DOM trees may impact rendering performance. Avoid deep nesting and limit selector complexity within :has().
Is my data safe?
Absolutely safe. All CSS code parsing and preview runs locally in your browser. No data is sent to any server, and no code is stored. Data is automatically cleared when you close the page.