XPath Selectors: Target Any Element by Its Content

You asked and we delivered. Experiences now supports XPath selectors alongside CSS selectors in Transformations and Layouts. You can target elements based on their text content, position in the DOM tree, or any attribute, without needing developers to add custom tags or IDs first.

CSS selectors work great for elements with clear classes or IDs. But when you need to replace an element whose inner child contains a certain text, CSS has no answer. XPath does. //section[.//h2[contains(text(), 'Related')]] targets a section with a “Related” heading inside it. These patterns previously required developers to add data attributes or specific classes. Now you write the selector yourself and move on.

Here’s how you can get started:

• Target elements by text content. Use XPath expressions like //button[contains(text(), 'Sign Up')] to find elements based on what they say, not how they’re tagged.
• Navigate the DOM tree. Select parent elements based on their children, or target deeply nested elements by their relationship to other nodes.
• Mix and match. Use CSS selectors for straightforward targeting and XPath for complex cases. Both work in the same input field across Transformations and Layouts.
• Get instant validation. The selector input validates your XPath syntax in real time and flags errors before you save.

This works everywhere you enter a selector: Page Transformations, Layout placement rules, and fallback selectors. Type your XPath expression in the selector field (any expression starting with / or .// is automatically recognized as XPath) and the system handles the rest.

Find the element. Transform it. No tickets required.