Hover Over Any Element. See Every Class. Copy Any Selector.

CSS Class Inspector

Live CSS class inspection with style diffing — only shows properties that differ from defaults.

Only the styles that differ from defaults. No scrolling.

Hover to see every CSS class

Style diffing — only non-default properties

Auto-generates multiple selector types

Draggable, resizable inspector panel

How It Works

Hover to inspect. Click to store. Copy any selector.

Hover over any element. A tooltip shows each CSS class and its non-default styles — property names in yellow, values in white.

Click any element. The inspector stores it with auto-generated selectors: Tag, ID, Class, Combined classes, Tag + ID, Tag + Classes.

Each selector has a copy button. One click copies to clipboard. Development tools that cut through inherited noise.

Style Diffing: Only What Matters

DevTools shows every computed property — hundreds of them. Most are inherited defaults.

CSS Class Inspector creates a temporary element with only the target class, compares its computed styles against the original, and shows only the differences.

Properties checked: display, position, flex, grid, margin, padding, width, height, color, background, border, font-size, font-weight, transform, animation, box-shadow, opacity, z-index, overflow, text-align, line-height.

If a class doesn't change any of these from the default, it doesn't appear. Zero noise.

Stored Elements

Build a collection of selectors as you audit a page.

Every clicked element gets stored in a collapsible list. Each entry shows:

- Tag name, ID, and class chain
- Timestamp of when it was captured
- Every possible selector variation with individual copy buttons

Copy them into your stylesheet, testing script, or scraper. The panel is draggable, resizable, and closes with ESC.