IconVault logoIconVault
Sign in

:has() Playground - Free Online CSS Tool | IconVault

Experiment with the CSS :has() relational selector in interactive demos. Style parents based on children. Free, runs in your browser.

All tools

:has() Playground

Try the CSS parent selector live

5 of 5 free uses left
Browser support::has() not supported here:has() ships in Chrome 105+, Edge 105+, Safari 15.4+ and Firefox 121+. Edit any selector below and watch the live result update.

1. Card with an image

Invalid selector

Style a card differently when it contains an image, no extra class needed on the card.

Card with image

Matches :has(img)

Card without image

No match, no highlight

2. Form validation state

Invalid selector

React to a child's state from the parent: highlight the whole form while any field is invalid. Type a bad email to see it.

Clear the field or type an invalid email: the form lights up red.

3. Nav with an active link

Invalid selector

Give the nav bar a distinct look only when one of its links is active. Click the links to toggle.

4. Grid with a featured item

Invalid selector

Change the whole grid layout when it contains a featured item, without JavaScript.

Featured
Item
Item

5 of 5 free snippet copies left.

About this tool

IconVault's :has() Playground is an interactive lab for the CSS relational pseudo-class :has(): try the famous parent selector with live demos, including styling a parent based on its children and matching siblings. Edit the samples, toggle states and see the selector logic work instantly.

:has() ended decades of asking for a parent selector in CSS: card:has(img), form:has(:invalid), nav:has(.active). It ships in all modern browsers. Free and runs fully in your browser.

Frequently asked questions

Popular searches

css has selector:has() csscss has playgroundhas selector csscss parent selectorcss select parent based on child:has() examplecss has browser supportcss has selector examples:has() democss relational selectorparent selector css trickcss has child selector:has() sibling selectorcss select parent with classhas() pseudo-classcss :has not supportcss has() tutorial:has() playground onlinetest css has selectorcss has selector generatorcss has examples:has(img) csscss style parent if child existscss has() polyfillcss relational pseudo-class:has() form validation csscss has() quantity queriescss :has() navigationcss :has(:hover)css has adjacent siblingcss select element with childmodern css has selectorcss has() caniusefree css playgroundcss selector playground:has() interactive demolearn css has selectorcss has() use casescss has() browser compatibilitycss parent based on child classcss :has() explainedcss has selector mdncss has() support firefoxcss :has() card examplecss :has() examples listcss has selector safaricss :has() menu highlightcss has() checked inputcss :has() table rowcss has() empty state

More tools

Code Playground

Write HTML, CSS & JS with live preview.

JSON Formatter

Beautify, validate & minify JSON.

Base64 Encoder

Encode & decode text and files.

JWT Decoder

Inspect tokens without sending them anywhere.

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →