CSSAWWWARDS
+ Submit tool
Built-in toolFree · No signup

CSS :has() Selector Tester

Write a :has() selector and see exactly which elements it matches, highlighted live against real HTML — powered by your browser's own selector engine, not a simulation. Edit the markup to test your own cases.

Share:

HTML

:has() Selector

0 elements matched — highlighted below

Live Preview

CSS Output
.card:has(img) {  outline: 2px solid #1D9E75;}

How to use

01

Edit the HTML

Use the sample markup or paste your own — a mix of cards, images, and a form works well for exploring :has().

02

Write a :has() selector

Try something like .card:has(img) or .card:not(:has(.badge)).

03

Watch matches highlight live

Every element the selector matches gets a green outline in the preview, in real time as you type.

04

Try the presets

Click any preset to see common :has() patterns — image presence, badge presence, and form validation state.