CSS :has() Playground
Pick a real-world HTML scene, type a :has() selector, and see exactly which elements match, live in your browser. No CodePen, no setup.
Try these patterns
Paste any selector from this table directly into the tool above.
| Selector |
|---|
| .form-group:has(input:invalid) |
| li:has(a.active) |
| .card:has(img) |
| .grid:has(.card:hover) .card:not(:hover) |
| label:has(input:checked) |
| .grid:has(:nth-child(3)) |
What works vs. what doesn't in this playground
- ✓Persistent states:
:has(img),:has(.active),:has(input:invalid),:has(input:checked) - ✗Transient states:
:has(:hover),:has(:focus)— evaluated at call time, not during hover. Click “Show Answer” to see the CSS effect directly.
Frequently Asked Questions
How does the element highlighting work?
- When you type a selector, the tool runs
document.querySelectorAll(selector)inside the preview pane. - It adds a
.pg-matchCSS class to every matched element, which applies a pulsing yellow outline. - The query runs 150ms after each keystroke so the preview stays responsive while you type.
Why doesn't the hover-based selector highlight any elements?
querySelectorAll evaluates the selector at the exact moment it's called. Since nothing is hovered when the query runs, .grid:has(.card:hover) matches zero elements.
Why does :has(input:checked) work but :has(input:hover) doesn't?
| :has(input:checked) ✓ | :has(input:hover) ✗ | |
|---|---|---|
| State type | Persistent (DOM tracks it) | Transient (only exists during hover) |
| querySelectorAll | Evaluates real DOM state | Hover is gone by call time |
| Works in playground? | Yes | No, use Show Answer instead |
Is CSS :has() safe to use in production?
Yes. :has() is Baseline Widely Available since 2024. Chrome, Firefox, Safari, and Edge all support it fully. Global coverage exceeds 95% in 2026. Use it without fallbacks for any modern project.
How is this different from CodePen or JSFiddle?
| This playground | CodePen / JSFiddle | |
|---|---|---|
| Starting point | 6 preloaded real-world scenes | Blank canvas (build HTML yourself) |
| Purpose | Test :has() specifically | General CSS/JS sandbox |
| Account needed? | No | Optional but needed to save |