Unused CSS Finder

Tool Overview

An unused CSS finder takes HTML and CSS you provide and reports which CSS selectors are not used in that HTML. It parses the HTML, extracts selectors from the CSS, and checks each selector against the parsed document. It does not run a live website; it only compares the HTML and CSS text you paste or upload.

Unused CSS makes stylesheets larger and slower to load. It also makes it harder to see which styles matter. Removing unused rules can reduce file size and simplify maintenance, but removing a selector that is used by JavaScript or added dynamically can break the page.

This tool helps you find candidates for removal. It marks each selector as used or unused and assigns a confidence level (high, medium, low). You can whitelist selectors so they are always treated as used. You can run an optional check that asks an external service to flag selectors that are likely used by JavaScript; those are then marked as used with a warning. You can download a new CSS file with the unused rules stripped out.

The tool is for developers and anyone who edits HTML and CSS. You paste or upload HTML and CSS, click Analyze, and read the results.

Background & Concept Explanation

A CSS selector (e.g. a class, an id, or a tag name) is “used” in this tool if the parsed HTML document contains at least one element that matches that selector. The tool uses the browser’s querySelectorAll on the parsed HTML. If it returns one or more elements, the selector is marked used; otherwise it is marked unused.

Selectors are taken from the CSS by finding rule blocks (text before curly braces). The tool skips at-rules (e.g. @media, @keyframes). For each rule it splits by comma to get individual selectors. For each selector it removes pseudo-elements and pseudo-classes and takes the first part of compound selectors (e.g. before space, plus, greater-than) to simplify matching. There is a limit on how many selectors are processed and on selector length to keep the tool responsive. A related operation involves validating CSS syntax as part of a similar workflow.

Confidence is set by the tool. If a selector is in your whitelist, it is marked used with high confidence. If querySelectorAll finds elements, it is used with high confidence. If it finds no elements, confidence depends on heuristics: selectors that contain words like “active”, “open”, “show”, “hidden”, “modal”, “toggle”, “disabled”, “loading”, “error”, etc. are given low confidence because they might be added by JavaScript. Other class or id selectors get medium confidence; the rest get high confidence. If querySelectorAll throws (e.g. invalid or complex selector), the tool assumes the selector is used and sets low confidence so you do not remove it by mistake.

Reduction percentage is the number of unused selectors divided by the total number of selectors found, times 100. It indicates how much of the selector set could be removed if you delete all rules the tool marks unused.

An optional “Dynamic Selector Check” sends the list of unused selectors (up to a limit) to an external service. The service returns a list of selectors it considers likely used by JavaScript. The tool then marks those selectors as used, with a note that they are likely dynamic, so you are less likely to remove them by mistake.

Download cleaned CSS builds a new CSS string by removing from your CSS every rule whose selector is marked unused. Removal is done with a regex that matches the selector and its block. The result is offered as a file download; your original input is not changed.

Doing this by hand would require parsing HTML and CSS yourself and testing each selector. This tool automates the parsing and the check in one step. For adjacent tasks, validating HTML code addresses a complementary step.

Key Features

• HTML input: paste HTML in a text area or upload a file (.html, .htm). Maximum size is 10MB. The tool parses this with the browser’s HTML parser to build a document. Both inputs are required to run analysis.
• CSS input: paste CSS in a text area or upload a file (.css). Maximum size is 5MB. The tool extracts selectors from this CSS; it does not run the CSS.
• Analyze button: you click Analyze to run the check. The tool parses the HTML, extracts selectors from the CSS, and for each selector runs querySelectorAll on the parsed document. Results are shown in a list with total and unused counts and a reduction percentage.
• Selector list: each extracted selector is shown with a used or unused icon, the selector text, a confidence badge (high, medium, low), and a short reason (e.g. “Selector found in HTML DOM”, “No matching elements found”, “Manually whitelisted”, “Likely dynamic selector used by JavaScript”).
• Whitelist: you can add or remove a selector from a whitelist. Whitelisted selectors are always treated as used with high confidence and the reason “Manually whitelisted.” Changing the whitelist triggers a new analysis so counts and the list update.
• Filter: you can show “Unused”, “Used”, or “All” selectors so you can focus on one set.
• Stats: the tool shows total selectors, number of unused selectors, and a button to download cleaned CSS (CSS with unused rules removed).
• Download cleaned CSS: the tool builds a new CSS string by removing each rule whose selector is marked unused. It uses a regex to find and remove the selector and its block. The result is downloaded as a file (e.g. cleaned-styles.css). Use this as a starting point; review and test before replacing your live CSS.
• Dynamic Selector Check: an optional button sends the list of unused selectors (up to a limit, e.g. 50) to an external service. The service returns selectors it considers likely used by JavaScript. The tool marks those as used and shows a “likely dynamic” style note so you can avoid removing them.
• Confidence levels: high means the tool is more confident the selector is truly used or unused; low means it might be used by scripts or complex logic. Use low-confidence results as hints and verify before removing.
• Load Sample: a button fills the HTML and CSS inputs with sample content that includes some unused classes and ids so you can see how the tool works.
• Clear: a button clears both inputs, the results, and the whitelist so you can start a new analysis.
• File upload: you can choose an HTML file or a CSS file to load its contents into the corresponding input. The same size limits apply.
• Error handling: if HTML or CSS is too large, or if HTML fails to parse, the tool shows an error message. Invalid or complex selectors that cause querySelectorAll to throw are treated as used with low confidence.

Common Use Cases

Cleaning a single page: paste the page’s HTML and its CSS (or the relevant stylesheet), click Analyze, review unused selectors and their confidence, then use “Download cleaned CSS” to get a reduced file. Test the page after replacing the CSS to ensure nothing breaks.

Checking after removing features: paste the current HTML and CSS, run the tool, and see if any selectors that were used only by removed features now appear as unused. Whitelist any you want to keep (e.g. for future use or shared components).

Finding candidates for removal: use the filter to show only “Unused” selectors and sort by confidence. Prefer removing high-confidence unused selectors first; double-check low-confidence ones and run the Dynamic Selector Check before removing.

Protecting dynamic classes: if you use classes like “open”, “hidden”, “loading” that are added by JavaScript, run the Dynamic Selector Check so those selectors are marked as used and not suggested for removal.

Learning: use “Load Sample” to see sample HTML and CSS with unused rules, run Analyze, then try the whitelist and download to understand how the tool behaves. When working with related formats, formatting CSS can be a useful part of the process.

How to Use This Tool

1. Open the unused CSS finder in your browser.
2. Paste or upload your HTML in the HTML area (paste in the text area or use the upload control for .html/.htm). Keep the size under 10MB.
3. Paste or upload your CSS in the CSS area (paste in the text area or use the upload control for .css). Keep the size under 5MB.
4. Click “Analyze”. The tool parses the HTML, extracts selectors from the CSS, and checks each selector against the parsed document.
5. When results appear, read the stats: total selectors, number of unused selectors. The reduction percentage is unused divided by total, times 100.
6. Use the filter (Unused, Used, All) to show only the group you care about.
7. For each selector, read the confidence (high, medium, low) and the reason. Use this to decide which rules are safe to remove.
8. If a selector is used but you want to keep it even if it were unused (e.g. shared or future use), click the whitelist control to add it. The tool re-runs analysis and the list updates.
9. Optional: click “Dynamic Selector Check” (or “Check”) to send unused selectors to the external service. When it returns, selectors flagged as likely dynamic are marked as used and shown with a dynamic warning. This helps avoid removing classes that JavaScript adds.
10. To get a new CSS file without the rules marked unused, click “Download”. Open the downloaded file and replace your stylesheet only after testing your page.
11. Use “Load Sample” to try the tool with sample HTML and CSS, or “Clear” to reset everything and start over.

Calculations & Logic

Selector extraction: the tool scans the CSS string for the pattern “something before {”. It skips at-rules (lines starting with @). For each rule it splits the “something” part by comma, then for each part it strips pseudo-elements and pseudo-classes (e.g. :hover, ::before) and takes the first segment of compound selectors (before space, +, >, ~). Selectors longer than a set length or beyond a total count limit are skipped. Duplicates are removed.

Used check: for each selector, if it is in the whitelist, it is marked used. Otherwise the tool runs doc.querySelectorAll(selector) on the parsed HTML document. If the result has length greater than zero, the selector is used; otherwise it is unused. If querySelectorAll throws, the selector is treated as used (to avoid suggesting removal of invalid or complex selectors).

Confidence: whitelisted or found in DOM → high. Not found and selector contains one of a fixed list of words (e.g. active, open, show, hidden, modal, toggle, disabled, loading, error) → low with reason “Potentially used by JavaScript for state management.” Not found and selector starts with . or # → medium. Not found and other → high. QuerySelectorAll error → used with low confidence and reason “Complex or dynamic selector logic detected.”

Reduction percentage: (unusedSelectors / totalSelectors) × 100, or 0 if there are no selectors.

Download cleaned CSS: for each rule in the results that is marked unused, the tool builds a regex that matches that selector (escaped for regex) followed by optional whitespace and then { ... }. It replaces each such match in the CSS string with an empty string. The final string is offered as a download. The order of removal can affect the result if selectors overlap; the tool uses the order of the rules in the results. In some workflows, minifying CSS files is a relevant follow-up operation.

Dynamic Selector Check: the list of selectors that are currently unused is sent to an external service (up to a limit, e.g. 50). The service returns a list of selectors it considers likely dynamic. The tool then sets those selectors to used, with a note that they are likely used by JavaScript, and refreshes the list and counts.

Reference Tables

Tips, Limitations & Best Practices

Always test your page after removing CSS. The tool only sees the HTML and CSS you give it. It does not run JavaScript, so classes or ids added by scripts are not in the parsed HTML. Use the Dynamic Selector Check and whitelist to reduce the chance of removing those.

Use the whitelist for selectors you know are needed (e.g. from a component library or for JS hooks). Whitelisting forces them to be treated as used so they are not removed in the downloaded cleaned file.

Do not rely on the tool for complex or invalid selectors. If querySelectorAll throws, the tool assumes used with low confidence; it does not guarantee the selector is valid or safe to keep.

The tool analyzes one HTML string and one CSS string. It does not crawl multiple pages or merge several HTML files. To approximate a multi-page site, paste or concatenate HTML from the pages you care about and the combined CSS, then run the analysis. Results still only reflect what is in that single HTML string. For related processing needs, finding duplicated code handles a complementary task.

Pseudo-elements and pseudo-classes are stripped before matching, and only the first part of compound selectors is used for the “used” check. So the tool may miss some edge cases (e.g. selectors that depend on structure the parser changes). Review the list and test after cleanup.

Downloaded “cleaned” CSS is generated by regex removal. If your CSS has unusual formatting or nested rules, the result might be wrong. Prefer using the report as a guide and editing the CSS by hand for critical stylesheets.

Keep HTML and CSS under the size limits. If you hit “too large”, split the HTML or CSS (e.g. by page or by file) and run multiple analyses.

Clear the inputs and results before pasting new content so you do not mix old and new analysis.