CSS Selector to XPath Converter

How to use

1. 1Pick a direction at the top: CSS to XPath, or XPath to CSS.
2. 2Type or paste your selector into the input box, or tap one of the example chips to try it.
3. 3Read the converted expression in the output box and press Copy result to use it.
4. 4Watch for amber notes, which explain emulated parts like ends-with, and red messages, which explain anything that cannot be converted.
5. 5Use Switch direction to flip CSS and XPath, Load sample for a worked example, or Clear to start over.

About this tool

CSS Selector to XPath Converter translates a CSS selector into an equivalent XPath 1.0 expression, and converts a common XPath location path back into a CSS selector. The two notations exist to solve the same job, locating elements in an HTML or XML document, but tools and teams force one syntax or the other: Selenium and Scrapy let you write either, Playwright and Cypress lean on CSS, lxml and many older test suites speak XPath, and a selector copied from browser dev tools is almost always CSS. Moving a working selector from one syntax to the other by hand is fiddly and easy to get subtly wrong, which is exactly the gap this tool fills. Going from CSS to XPath, it understands type, id, class, and the universal selector, attribute selectors with every standard operator (presence, =, ^=, $=, *=, ~=, and |=), the descendant, child, adjacent sibling, and general sibling combinators, comma-separated selector groups, and the structural pseudo-classes that have an exact XPath meaning: first-child, last-child, only-child, empty, root, and numeric nth-child. It handles the awkward cases correctly rather than approximately. Class matching uses the normalize-space and concat pattern so a selector like .btn only matches a real class token and not a substring of another class name, ends-with for [attr$=value] is emulated with substring and string-length because XPath 1.0 has no ends-with function, and the adjacent sibling combinator is built with following-sibling and a self check so it matches only the immediately next element. Going the other way, from XPath back to CSS, it reads the location-path shape these tools generate, with descendant and child steps, attribute equality and presence predicates, id and class predicates, and numeric position predicates that become nth-child. Crucially, the converter is honest about its limits. Pseudo-elements, state pseudo-classes such as hover and checked, nth-of-type, and an+b formulas have no XPath 1.0 equivalent, and XPath axes such as following-sibling and ancestor along with functions such as contains and text have no CSS equivalent, so instead of emitting a plausible but wrong result the tool reports a clear reason it cannot convert. As you type, a CSS selector is also compiled by your own browser to confirm it is valid before it is converted. Everything, including parsing and validation, runs locally on this page, so the selectors you paste are never uploaded or stored.

Free to use. Works in your browser. No signup, no login.