XPath to CSS Selector

What is an XPath to CSS selector converter?

An XPath to CSS selector converter rewrites an XPath expression into a selector you can pass to document.querySelector() or document.querySelectorAll(). For example, //form[@id='signup']//input[@type='email'] becomes form#signup input[type="email"].

This tool converts a strict, practical subset of XPath for HTML documents. It returns an error instead of producing a selector that could match different elements.

How to convert XPath to a CSS selector

1. Paste one XPath beginning with / or // into Input.
2. Review the equivalent selector in Output. The result updates as you type.
3. Copy the selector and use it with the browser DOM APIs or another tool that accepts standard CSS selectors.

Use Example to load a supported expression. Invalid XPath and valid-but-unsupported constructs are reported separately so you can correct the input.

Supported XPath syntax

The converter supports:

• Child paths with / and descendant paths with //.
• HTML element names and the * wildcard.
• Attribute existence and string equality, such as [@disabled] and [@type='email'].
• Attribute contains() and starts-with() predicates.
• Multiple supported attribute conditions joined with and.
• A numeric position or last() when it can be converted without changing which element is selected.

For example:

//article[contains(@class, 'card')]//a[@href]

becomes:

article[class*="card"] a[href]

contains(@class, 'card') keeps XPath’s substring behavior, so it becomes [class*="card"], not .card.

Unsupported XPath constructs

CSS selectors cannot express every XPath relationship. This converter rejects relative paths, text(), text matching, or, not(), unions, namespaces, and parent, ancestor, sibling, preceding, or following axes. It also rejects position predicates combined with attribute filters when a normal CSS selector would change the XPath meaning.

These cases are not approximated. Use XPath directly when your locator depends on text content, a context node, reverse traversal, or another unsupported construct.

XPath vs. CSS selectors

XPath can navigate both forward and backward through a document and can inspect text nodes. CSS selectors primarily describe elements through their names, attributes, states, descendants, and children.

CSS selectors are a natural fit for browser APIs such as querySelectorAll(). XPath remains useful when you need relationships or node types CSS cannot represent.

Privacy

The XPath input and generated selector stay in your browser. The tool does not upload them, save them in browser storage, place them in the page URL, or send them to an AI service.

XPath to CSS selector FAQ

Can every XPath be converted to CSS?

No. XPath supports text nodes, reverse axes, functions, and expressions with no equivalent standard CSS selector. The tool reports those constructs as unsupported.

Can I convert a relative XPath?

No. A relative XPath such as .//button depends on a separate context node. This tool accepts document-level paths beginning with / or // so the output has one defined meaning.

Does the converter support XML namespaces?

No. The output targets an HTML DOM and standard browser CSS selector APIs. XML namespace matching has different name and case rules.

Why was my position predicate rejected?

XPath applies position predicates within a specific filtered node set. A CSS :nth-of-type() selector can refer to a different set when attribute filters are also present, so the tool rejects unsafe combinations instead of returning a misleading result.

Does the tool validate the selector against my HTML?

No. It converts the XPath string without accepting or parsing a separate HTML document. Test the selector against the page where you plan to use it.