Unused CSS Finder: Free Online Checker

This unused CSS finder compares the selectors in your stylesheet with the HTML you paste and lists the ones that have no match. It is built for developers and site owners who want to trim dead code and shrink CSS files. You get counts of total, used and unused selectors, plus the full lists.

What Is Unused CSS?

Unused CSS is any rule in a stylesheet whose selector does not match an element in the HTML that loads it. The rule is still downloaded and parsed, but it never changes how anything looks.

A selector is the part of a rule before the curly braces. A class selector such as .header targets elements with that class, an ID selector such as #main targets one element by its id, and a tag selector such as footer targets every footer element. If your HTML never uses that class, id or tag, the rule is dead weight.

Dead rules pile up in predictable ways: a full CSS framework loaded for a few components, a redesign that left old styles behind, a WordPress theme or plugin that ships styles for features you never turned on, and snippets copied from tutorials. Browsers must download and process CSS before they can paint a page, so a leaner stylesheet helps pages render sooner. Lighthouse even includes a "Reduce unused CSS" audit for this reason.

How to Use the Unused CSS Extractor

You need two pastes and one click. Follow these steps:

1. Copy your stylesheet and paste it into the CSS Code box. Minified or formatted code both work, and comments are ignored.
2. Paste the page markup into the HTML Code box. Use the rendered source of the page, including menus, modals and footers, not just the main content.
3. Click Find Unused CSS.
4. Read the three counters: Total Selectors, Review candidates and Used.
5. Open the Unused CSS Selectors list and check each entry against your scripts and other pages before you delete anything.
6. Edit your stylesheet, remove the confirmed rules, and test the site.

If either box is empty, the tool asks you to paste CSS or HTML first. Editing either box hides the old results, so click the button again after any change.

Worked Example: What the Results Look Like

Say you paste this CSS: .header { color: red; }, .unused-class { display: none; } and .footer { background: blue; }. In the HTML box you paste a div with the class header and a footer element with the class footer.

The counters show 3 Total Selectors, 1 Review candidate and 2 Used. The unused list contains only .unused-class. That rule hides elements, so it is a safe guess that nothing on this page needs it. Before deleting it, search your other templates and scripts for that class name.

How Do You Read and Act on the Results?

Each counter tells you where to look next. Total Selectors is every selector found in the CSS, with comma-separated selectors counted one by one. Review candidates are the ones with no match in your HTML. Used are the ones the tool found, or assumed to be present.

What a good result looks like

A small candidate list that you can explain is a good result. Each entry should be either an old rule you recognize as dead or a state class you know scripts add later. If you pasted markup from several templates and still see only a few candidates, your stylesheet is already lean.

What a poor result looks like

A very large candidate list usually means you pasted too little HTML. A stylesheet is shared across a whole site, so one page rarely uses more than a fraction of it. The fix is to paste the markup of several page types together (home page, article, product, contact page) and run the scan again. Only selectors missing from all of them are strong removal candidates.

How selectors are judged

• Class selectors are matched against the class names in your HTML. If a selector lists several classes, each one must appear.
• ID selectors are matched against the id values in your HTML.
• Tag selectors are matched by looking for that tag in your markup.
• Selectors that begin with a pseudo-class, an attribute check or the universal symbol, plus html and body rules, are counted as used.

In a longer selector such as .nav .item, the tool checks that both class names exist in the HTML. It does not check whether one element sits inside the other.

Who Needs an Unused CSS Checker?

Anyone who maintains a stylesheet longer than a few hundred lines benefits from an audit. These are the typical situations:

• WordPress site owners: paste the active theme stylesheet and the page source from your browser to find rules for features you do not use. This shows what to remove or ask a developer to dequeue.
• Front-end developers: check a component's CSS against its markup before a pull request, so dead rules never reach production.
• Site owners after a redesign: compare the old stylesheet with the new templates and clear out leftovers.
• Framework users: see how little of a large CSS library your HTML actually uses, then decide whether a custom build makes sense.
• Students and beginners: learn how selectors relate to HTML by seeing which rules match and which do not.

If you generate styles with a helper such as the Dark Mode CSS Generator, run the output through this scan against your real markup to make sure every rule applies to something.

Best Practices, Common Mistakes and Troubleshooting

Check dynamic classes before deleting

Classes such as .is-open, .active or .show are often added by scripts after the page loads. They are not in your static HTML, so the tool lists them as candidates. Search your script files for each name. If a script uses it, keep the rule.

Include hidden markup

Dropdowns, cookie banners, modals and tabs often live in the HTML but stay invisible. Paste the full page source so their styles are counted as used.

Why does a rule look used when it is not?

Class matching is generous with hyphenated names. A .btn rule may be counted as used if your HTML contains btn-primary. Tag matching is loose too: a rule for a can pass because the markup contains an article tag. Treat the Used list as a starting point, not proof.

Why do from and to appear in the unused list?

Keyframe steps such as from and to can be listed as candidates because they are not real elements. Ignore them, since they belong to an animation.

Remove in small batches

Back up your CSS, delete a handful of rules, and test the main page types at desktop and mobile widths. Small batches make it easy to find the one rule that was needed. When you are done, check that the smaller file is served compressed with the GZIP compression checker and that it is cached properly using the HTTP header checker.

What Are the Limits of This Tool?

This is a static comparison of the two code blocks you paste. It does not load your live site, run scripts, open menus or follow stylesheet imports, so it cannot see classes added after the page loads. It does not list at-rules such as @media or @font-face as selectors, and it does not judge specificity or the cascade. It also does not write a cleaned stylesheet or calculate bytes saved: you edit the CSS yourself. Use it to find candidates, then confirm each one.

To see how lean the page is overall, pair the scan with the code to text ratio checker, or browse the website audit and performance tools for more speed checks.

Paste your CSS and HTML into the boxes above and click Find Unused CSS. In a few seconds you will have a clear list of rules to review, and a lighter stylesheet is one careful cleanup away.