How does it decide a selector is unused?

It indexes the tag names, class names, ids and attribute names present in your HTML, then evaluates each CSS selector against that index. Grouped selectors are split on top-level commas and each member is judged separately, and complex selectors are split on combinators (space, >, +, ~) so every compound part is checked. A selector is marked unused only when one of its parts references a tag, class, id or attribute that is absent from the markup.

Will it incorrectly flag :hover, :focus or :root styles as unused?

No. Interactive and structural pseudo-classes - :hover, :focus, :focus-visible, :active, :visited, :checked, :disabled, :target, :root and more - are stripped before matching, so a selector like .nav__link:hover is judged purely on whether .nav__link exists in the HTML. A selector that is nothing but a pseudo (for example :root or ::selection) is always kept, since its applicability is not visible in static markup.

What does the safelist do, and how do the wildcards work?

The safelist keeps selectors you know are used at runtime even though they do not appear in the pasted HTML - common with classes toggled by JavaScript or generated by a framework. Enter comma-separated tokens; an exact token like is-open keeps any selector whose class matches it, and a trailing-* token like modal-* keeps any class starting with modal-. Safelisted selectors are always reported as used and are never stripped from the cleaned CSS.

Does it handle grouped selectors where only part is unused?

Yes. For a grouped rule such as .btn, .ghost-btn { ... }, each selector is evaluated independently. If .btn is used but .ghost-btn is not, the cleaned CSS keeps the rule but rewrites its selector list to drop the dead member. Only when every selector in a group is unused is the whole rule removed.

How is the estimated KB saving calculated?

The tool sums the source length of every rule whose selectors are all unused - that is, the rules that get removed entirely - and reports it in kilobytes. Partially-trimmed grouped rules are not counted, since their bodies survive. Treat the figure as a realistic ballpark for prioritizing cleanup; the exact post-minification saving depends on your build pipeline.

Is it safe to ship the cleaned CSS directly?

The analysis is based on the static HTML you paste, so any selectors used only by JavaScript-injected, conditionally rendered, or templated markup will look unused and could be removed. Add those classes to the safelist, always test after removal, and for automated production builds use a tool like PurgeCSS that can scan your full template and component source.

Unused CSS Detector

Paste your HTML and CSS and instantly find selectors that never match the markup. Understands multi-class compounds, descendant/child/sibling combinators, grouped selectors, pseudo-classes and @media blocks, and lets you safelist dynamic classes. Get a usage summary, the list of dead selectors, and a cleaned stylesheet with the unused rules stripped out - all in your browser.

About this ToolHow it works, benefits & use cases

Stylesheets accumulate dead rules as components are renamed or removed, and shipping that bloat slows downloads and parsing. Paste your HTML and CSS here and the detector cross-references them: it parses every selector out of your stylesheet - including the ones inside @media, @supports, @container and @layer blocks - and checks each one against the tags, classes, ids and attributes it finds in the markup. It is selector-aware rather than a blunt text match, so multi-class compounds like .btn.btn--primary, descendant and child combinators like nav > a, sibling combinators and grouped (comma-separated) rules are each evaluated on their own: a selector is only flagged when none of its concrete parts appear in the HTML. Interactive and structural pseudo-classes such as :hover, :focus, :checked and :root ride along with their base selector instead of being wrongly reported, and a safelist input lets you keep classes that only ever appear at runtime - type exact names or a trailing-* wildcard like js-* or modal-*. You get a usage summary (total, used, unused, and the percentage that is dead), an estimated KB saving, the full list of unused selectors, and a cleaned stylesheet with the dead rules removed - including grouped rules trimmed down to just their surviving members. Everything runs in your browser and updates live as you type, or you can switch to run-on-demand for very large stylesheets.

How to Use

1Paste your HTML markup into the HTML panel, or click Load example to try sample input.
2Paste the stylesheet you want to audit into the CSS panel.
3Add any runtime-only classes to the Safelist (comma-separated, with optional trailing-* wildcards) so they are never flagged.
4Read the summary - Total selectors, Used, Unused, % unused - and the estimated KB saving.
5Review the Unused selectors list to confirm what will be removed.
6Copy, download, or pipe the Cleaned CSS, which is your stylesheet with the dead rules stripped out.

Key Benefits

Selector-aware: understands compound selectors, combinators, and grouped rules
Parses selectors inside @media, @supports, @container and @layer blocks
Treats pseudo-classes like :hover, :focus and :checked as used via their base selector
Safelist with exact names and trailing-* wildcards for dynamic classes
Reports used/unused counts, percent unused, and an estimated KB saving
Produces cleaned CSS - grouped rules are trimmed, fully-dead rules removed
Runs entirely in the browser; your HTML and CSS are never uploaded

Common Use Cases

Trimming legacy CSS after a component or class was renamed or deleted
Auditing a static page or email template for unreferenced styles
Getting a quick before-you-ship sense of how much of a stylesheet is actually used
Generating a cleaned stylesheet to feed into a CSS minifier or build step
Reviewing which selectors a small HTML snippet actually exercises

Paste HTML and CSS (or load the example) to see which selectors are unused.

HTML

The markup to check selectors against

CSS

The stylesheet to audit

Options

Safelist

Comma-separated class patterns to always keep (e.g. is-active, js-*). A trailing * is a wildcard for dynamically added classes.

Analyze live as I type

Smarter than a plain string match

Compound selectors like .btn.lg, combinators (nav > a), grouped rules and pseudo-classes are all understood: a rule is only flagged when none of its real tags, classes or ids appear in your markup. Interactive states such as :hover ride along with their base selector.

Test before you ship

Detection is based on static HTML, so classes added by JavaScript, frameworks or templates may look unused. Add them to the safelist, and always test after removing CSS. For automated production builds, reach for PurgeCSS.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Related guide

Guide · 14 min readTailwind CSS v3 to v4: The Complete Migration Guide (2026)Tailwind v4 is a ground-up rewrite. The upgrade tool handles most of it, but the CSS-first config, the renamed utilities, the rebuilt dark mode, and the browser-support floor are where teams get stuck. Exactly what changed and how to move across cleanly.Read the guide

Unused CSS Detector

How to Use

Key Benefits

Common Use Cases

Options

Smarter than a plain string match

Test before you ship

Was this tool helpful?

Share Your Experience

Related guide

Related tools

Frequently Asked Questions - Unused CSS Detector