ClientSideTools Privacy-First Browser Tools

CSS :has() Selector Debugger

:has() — the "parent selector" — matches an element based on its descendants or siblings, but the matching is invisible. This debugger shows, for every :has() rule, which element matched and which inner element triggered it.

SVG & CSS Engineering Local processing Your code stays in your browser. Nothing is uploaded.

Tool interface

Introduction

:has() inverts the selector direction: it styles an ancestor based on its descendants. That power comes with opacity — you can't see why a rule matched. This debugger makes the match chain visible.

How it works

  • Paste HTML and CSS containing one or more :has() rules.
  • The preview renders in a Shadow DOM so your styles stay isolated.
  • Matched (outer) elements get a teal outline; triggering (inner) elements get orange.
  • Each rule lists how many outer matches and inner triggers it produced.

Privacy

All rendering and querying is local. No upload, no account, no API key.

Limitations

  • Requires browser support for :has().
  • Inner-trigger detection strips a leading combinator; complex relative selectors are approximated.

FAQ

Why is :has() called a parent selector?

Because it lets you select an element based on what it contains — e.g. form:has(input:invalid) styles the form when it has an invalid input.

Is my code uploaded?

No. Everything runs locally.

Related tools

Version and changelog

  • Version: 1.0.0
  • Last updated: August 12, 2026
  • Changelog: Initial production release.