CSS Selector Generator
Generate a unique CSS selector for any element from pasted HTML, with a live preview, highlighting and one-click copy. Runs in your browser, GDPR-compliant.
Your inputs are processed in your browser and are not transmitted to our servers. Note: third-party resources (e.g. advertising and analytics from Google/Cloudflare) and an optional PayPal donation link may transfer data when loading or when clicked. Browser extensions or plugins may be able to read content that is visible in the input fields.
The result will appear here …
How to use this tool (video)
This video is hosted on YouTube. When you play it, data may be sent to Google.
CSS Selector Generator: create unique CSS selectors from HTML
For browser automation, end-to-end testing and web scraping you need reliable selectors that address your HTML at exactly the right spot. With this CSS selector generator you paste the HTML of your page or a snippet and get a unique CSS selector for every single element, ready to copy into Playwright, Selenium, Puppeteer or Cypress. A live preview renders your HTML right in the browser, a slider steps through all elements, and the selected element is automatically highlighted and scrolled into view.
How the CSS selector generator works
- Paste HTML: drop your code into the field, whether it is a full page or just a fragment such as
<div>...</div>. The tool detects this automatically. - Pick an element: step through elements with the slider. The preview shows the HTML live and highlights each selected element.
- Copy the selector: the generator builds the parent-child path and shows the result. One click on Copy puts the selector on your clipboard.
Unique and stable: from the id shortcut to the full path
If the element has an id, you get the short, stable selector #my-id: fast, readable and independent of its position in the document. Without an id the generator builds the full path from tag, classes and position, for example ul.menu li:nth-child(2) > a. The selector addresses exactly one element and does not break when content above moves. The auto-generated html, head and body wrappers are ignored, so the selector starts cleanly at the first element of your content.
CSS selector instead of XPath: why it is better
XPath is powerful but error-prone and tedious to write. Modern frameworks such as Playwright, Selenium and Cypress prefer CSS selectors because they are shorter, faster and far more readable. This generator does the manual work: you do not count positions or type nested paths, you get the unique selector in seconds, verified against a real preview of your HTML.
Features at a glance
- Live preview: your HTML is rendered in the browser and never sent to our server.
- Slider selection: choose each element by index, the preview scrolls to it and highlights it.
- Stable paths: id shortcut
#idor a full path with classes and:nth-child. - Fast copying: full selector and short form on your clipboard with one click.
- Safe & private: the preview is sanitized by default and loads no external resources, so pasted trackers trigger no network request.
- Optionally live: a toggle lets you load real images and iframes when you need them for your work.
Typical use cases
- End-to-end and UI tests with Playwright, Cypress or Selenium
- Web scraping and data extraction with Puppeteer or Scrapy
- Browser automation and scripts that click or modify single elements
- CSS debugging and targeted styling of individual components
Frequently asked questions
Does the CSS selector generator run locally?
Yes. The pasted HTML is processed entirely in your browser with the DOMParser and is neither sent to our server nor stored. The preview is sanitized by default and triggers no external network requests.
What is the difference between #id and the full path?
If the element has an id, the generator returns the short #id selector. Without an id it builds the full path from tag, classes and :nth-child position. The short selector is more robust against layout changes, the full path works even without an id.
What does :nth-child mean in the selector?
:nth-child(n) selects the nth sibling element of the same parent. When several elements of the same type occur, the generator numbers them, for example li:nth-child(2), so the selector stays unique.
Does the tool work with HTML fragments?
Yes. You can paste a full page or just a snippet such as <div>...</div>. The auto-generated html, head and body wrappers are ignored, so the selector starts with your actual content.
Why a CSS selector instead of XPath?
CSS selectors are shorter, faster and more readable and are natively supported by Playwright, Selenium and Cypress. The generator delivers them uniquely and without manual work, based on a real preview of your HTML.
Is my HTML stored?
No. All processing happens locally in your browser. Neither the pasted HTML nor the generated selectors are sent to a server or stored.