CSS :has() Playground

When you type a selector, the tool runs document.querySelectorAll(selector) inside the preview pane and adds a .pg-match CSS class to every matched element. That class applies a pulsing yellow outline. The query runs 150ms after each keystroke so the preview stays responsive while you type.

querySelectorAll evaluates the selector at the moment it's called. Since nothing is hovered when the query runs, .grid:has(.card:hover) matches zero elements. The CSS itself still works correctly — click Show Answer to apply the styles, then hover over the cards to see the sibling dimming effect.

:checked is a persistent state — the DOM tracks whether each input is checked, and querySelectorAll evaluates that real state. :hover is a transient state that only exists at the exact moment the mouse is over an element, which doesn't apply during a querySelectorAll call.

Yes. :has() is a Baseline Widely Available feature. All major browsers have supported it since late 2023 — Chrome, Firefox, Safari, and Edge. Global coverage exceeds 95% in 2026. Use it without fallbacks for any modern project.

CodePen and JSFiddle are general-purpose blank canvases — you build the HTML yourself. This playground comes with six preloaded real-world HTML components that match the patterns developers actually encounter. The focus on :has() specifically means every scene is designed to demonstrate a selector pattern rather than general CSS sandbox use.