Detect unused CSS selectors by comparing stylesheet rules against HTML markup for code cleanup.
Paste your HTML in one box, your CSS in the other, and this tool checks every selector in the stylesheet against the markup, listing the ones no element matches. Selector lists are split on commas and each part is tested independently, and matching obeys the same rules a browser applies: class tokens and ids must match exactly, letter for letter, and compound selectors only match real element nesting. The usual surprise: the tool sees only the markup you paste. Classes your scripts add at runtime, or selectors used on other pages, come back as unused even when the page needs them.
A concrete input and expected output from the current implementation.
Input
HTML box: <div id="app" class="card"><p class="note">Hello</p></div>
CSS box:
.card { padding: 16px; }
.note { color: #555; }
#app { max-width: 640px; }
p { line-height: 1.5; }
.hero { display: grid; }
.alert, .warning { color: red; } Expected output
Used: 4 of 7 (.card, .note, #app, p). Unused: 3 (.hero, .alert, .warning). The rule .alert, .warning is reported as two separate unused selectors, since each selector in a comma list is judged on its own.
.card, .note, #app, and p each have a matching element in the pasted markup, while no element carries the class hero. The comma group is split, so .alert and .warning are checked independently: a matching .alert element would not keep .warning off the unused list.
Each ruleset is reduced to its selector list, and lists are split on commas so a rule like .alert, .warning is checked as two selectors that succeed or fail independently. Matching is exact, never by substring: .btn-primary does not count as used just because a class attribute contains the text btn.
The HTML is parsed into a document tree and every selector is tested against it with the same semantics a browser uses for matching: element selectors match tags, class selectors match whole tokens, id selectors match the id attribute, and combinators such as .parent > .child hold only when the elements are nested exactly as the selector requires. Selectors that match nothing are reported unused.
Two common causes: the class is added by JavaScript after the page loads, so it is not in the markup you pasted, or the class token differs in spelling or case, because matching is exact and case-sensitive. Inspect the element in the browser, then paste the markup as it looks after scripts have run.
Treat it as a shortlist, not an automatic delete list. The comparison runs entirely in your browser, so nothing is uploaded, but before removing anything, search your codebase for that selector in JavaScript, templates, and other pages, since the tool sees only the CSS and markup you entered. Keep a backup and re-run the check after each round of deletions.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.