HTML
0 chars
CSS
0 chars
// find CSS rules that match nothing in your HTML
Paste HTML and CSS side by side to find every CSS selector that matches no element. Highlights unused rules, shows potential savings, and exports a clean CSS file.
Add your HTML markup in the left panel and the corresponding stylesheet in the right panel. Use full page HTML or component snippets.
The detector parses every CSS selector and checks whether it matches any element in the HTML. Unused rules are highlighted in red, used ones in green.
Copy the cleaned CSS output — unused rules removed — or download it as a file ready to replace your original stylesheet.
CSS Unused Detector compares a CSS file against HTML markup and identifies every selector that matches no element in the HTML. It uses the browser's native querySelector engine for accurate matching, handles media queries and at-rules correctly, and generates a cleaned CSS file with unused rules stripped out.
The tool parses the CSS to extract every selector string, then uses the browser's native document.querySelector() against a temporary DOM built from your HTML input. If the selector matches at least one element, it is marked as used. If it matches nothing, it is marked as unused. This uses the same matching engine browsers use to apply styles.
These selectors are either guaranteed to match every page (html, body, :root) or are not element selectors at all (@keyframes, @font-face, @layer). Removing them would break variable scoping, typography, or animation references even if no specific element matches them in the HTML snippet you pasted.
Possibly, if classes are added by JavaScript at runtime that are not present in the static HTML you pasted. This tool only analyses the HTML you provide. Classes that are added or toggled by JavaScript, server-rendered content not included in the snippet, or framework-generated markup may show as unused even though they are used in production. Always review the results before removing anything.
Yes. CSS rules inside @media blocks are extracted and their selectors are tested against the HTML just like top-level rules. The media query condition itself is noted in the results but is not evaluated — the selector matching is condition-independent since the same element exists regardless of viewport width.
The savings percentage shows how much smaller the cleaned CSS would be compared to the original input, measured by character count. This is an approximation — actual file size savings after minification and compression will differ, but the percentage gives a useful indication of how much dead code was found.
At-rules without selectors (@keyframes, @font-face, @charset, @import, @layer) are skipped from matching but kept in the output by default. Universal selectors like * always match and are marked used. Pseudo-element selectors (::before, ::after) can optionally be kept regardless of match status using the toolbar toggle.
As web projects grow, stylesheets accumulate rules that no longer match any element. Designers rename components, developers refactor markup, frameworks add utility classes by the thousand, and the CSS file keeps growing while fewer and fewer rules are actually applied. Identifying and removing dead CSS reduces file size, speeds up the cascade calculation, and makes the remaining stylesheet easier to understand and maintain.
Every CSS rule consists of one or more selectors and a declaration block. A selector is "used" if at least one element in the document matches it at parse time. This tool builds a temporary DOM from your HTML input and runs every extracted selector through document.querySelector() — the same matching engine that browsers use to apply styles. If the selector returns a match, the rule is used. If it returns null, the rule is a candidate for removal.
Some CSS constructs are kept regardless of HTML matching because removing them would break things. Global element selectors like html, body, and :root always apply. At-rules without element selectors — @keyframes, @font-face, @charset, @import, and @layer — do not match HTML elements and would be falsely flagged as unused. CSS custom properties declared in :root may be used by JavaScript or other rules not present in your snippet. These are all preserved by default with a toggle option to adjust the behaviour.
The most important limitation to understand is that this tool only analyses the HTML you paste. Classes added by JavaScript event handlers, toggled via classList.add(), or generated by a framework at runtime will show as unused if they are not present in the static HTML markup. Similarly, CSS rules targeting elements from server-rendered templates that you did not include will appear unused. This tool is best used for component-level analysis where you have the full rendered HTML of the component, or for catching obvious dead code from outdated stylesheets.
Rules inside @media blocks are extracted and analysed the same way as top-level rules. The media condition is not evaluated — a selector inside @media (max-width: 768px) is tested against the same HTML as a top-level selector. The media wrapper is preserved in the cleaned output if any of its nested rules are used. Empty media blocks are removed from the cleaned output.
The results panel shows every CSS rule colour-coded as used (green) or unused (red). Clicking any rule in the list highlights it in the cleaned CSS panel. The cleaned CSS output on the right contains only the used rules, formatted and ready to replace your original stylesheet. The savings bar shows the percentage reduction in CSS size. Download the cleaned file and run it through your minifier before deploying.