Skip to main content

Selector Builder in the Editor

· 2 min read

We’re excited to introduce the Selector Builder in the editor, making it easier than ever to create and refine CSS selectors for your experiments.

The Selector Builder gives you full control over the elements you want to target while keeping the process visual and intuitive. Instead of manually writing complex CSS selectors, you can now add, change, or remove parts of a generated selector directly in the editor.

What you can do with the Selector Builder​

The new builder allows you to edit key parts of your selector:

  • Tag – Change the HTML tag being targeted
  • ID – Add or remove IDs for precise targeting
  • Class – Modify classes included in the selector
  • Attributes – Include or exclude element attributes
  • Combinators – Adjust relationships between elements using >, +, or ~
  • nth-of-child – Target elements by their position in a parent container

This will allow you to target one or multiple elements.

How it works​

When you select an element in the editor, the Selector Builder shows a breakdown of the generated selector. Each part can be edited individually:

  • Click to edit a tag, class, or attribute
  • Add new parts to expand the selector
  • Remove parts that aren’t needed
  • Adjust combinators to change how elements relate
  • Set nth-of-child to target a specific instance of an element

Changes update in real time, giving you immediate feedback in the editor.

Read more about the Selector builder.