Does CSSpeek copy a CSS selector or just the class names?

Both. You can copy the raw class list (space-separated) or a ready-to-use selector like .card.card--large — whichever you need for your workflow.

Can it generate a unique selector for an element?

Yes. For elements without distinctive classes, CSSpeek can generate a unique nth-child-based selector path that reliably targets the element.

Does it show IDs too?

Yes. If the element has an ID, CSSpeek displays it prominently alongside the class list.

Will it help me read Tailwind CSS in the wild?

Absolutely — that's one of CSSpeek's most common use cases. Utility classes appear as a list, so you can read the styling intent at a glance instead of decoding a long string.

What about data-* attributes?

CSSpeek surfaces data-* attributes on the inspected element, which is useful for sites that use data attributes as styling hooks (like headless UI libraries).

Find and copy selectors, fast.

Every class on the clicked element, listed clearly, one tap to copy. The selector that actually matched is highlighted.

Add to Chrome — Free

Example output

Selector: text-5xl lg:text-7xl font-bold text-gray-900 mb-6 leading-tight
          selected-element

Why selectors deserve their own panel

In Chrome DevTools, finding the full class list of an element means opening the Elements panel, locating the node in a tree that scrolls twenty levels deep, and reading a long attribute string. CSSpeek shows that information immediately when you click the element.

Reading utility-first CSS

Frameworks like Tailwind CSS produce long, dense class strings:text-5xl lg:text-7xl font-bold text-gray-900 mb-6 leading-tight. Reading that inline is a chore. CSSpeek breaks the list out so each utility is on its own line — the styling intent becomes scannable in seconds.

Copying strategies

Copy all classes: space-separated, ready to paste into your own markup.
Copy as selector: dot-prefixed and concatenated, ready for your stylesheet.
Copy a stable path: a unique selector path using nth-child when the element has no reliable class hooks.

Where this saves time every week

Writing end-to-end test selectors without opening DevTools
Understanding a component library you're adopting
Reading the conventions of a team's existing codebase
Filing bug reports that say "this element" with precision

Selectors: frequently asked questions

Does CSSpeek copy a CSS selector or just the class names?: Both. You can copy the raw class list (space-separated) or a ready-to-use selector like .card.card--large — whichever you need for your workflow.
Can it generate a unique selector for an element?: Yes. For elements without distinctive classes, CSSpeek can generate a unique nth-child-based selector path that reliably targets the element.
Does it show IDs too?: Yes. If the element has an ID, CSSpeek displays it prominently alongside the class list.
Will it help me read Tailwind CSS in the wild?: Absolutely — that's one of CSSpeek's most common use cases. Utility classes appear as a list, so you can read the styling intent at a glance instead of decoding a long string.
What about data-* attributes?: CSSpeek surfaces data-* attributes on the inspected element, which is useful for sites that use data attributes as styling hooks (like headless UI libraries).