Applying a change to every matching element

Some changes belong on every element of a kind rather than on one: a badge on every product card, a new hover colour on every call to action. The CSS selector tool applies an edit to everything a selector matches, including elements that appear later through infinite scroll, carousels or single-page navigation.

Open it from the target icon in the floating toolbar at the bottom of the canvas, and enter a selector such as .product-card or a.cta. The tool shows how many elements it matches on the current page.

Add styling

Write CSS declarations, and they become a rule for the selector, such as .cta { … }, in the variant's global CSS.

• The rule is saved immediately, like any global CSS edit, so it is not in Undo. To remove it, edit Global CSS from the Changes list.
• Broken CSS, such as an unclosed comment, quote or bracket, is refused, so a typo cannot disable the rest of your global CSS.

Add HTML

Insert HTML into every match. The modes are Append (the default), Prepend, Before, After and Replace.

• Each match gets exactly one copy, even when the site re-renders or clones elements.
• New matches from infinite scroll get it too.
• Like any change, it can be undone, saved and reverted.

The HTML can include data from the page, so a badge added to every product card can show that card's own value. See Dynamic content: showing page data in a variant.

Selecting similar elements by pointing

If you would rather point than write a selector, select one element and press Select similar on the selection chip. It selects every element like this one, for example every product card's heading.

Current limits

• HTML with more than one top-level element, for example <p>a</p><p>b</p>, keeps only the first element. Wrap it in one element.
• Add HTML to every match stops after 2,000 insertions per page path.
• Add styling is not undoable, because it is saved into global CSS.