Selectors

Starting with Breakdance 3.0, classes and custom selectors are created and managed in the Selectors panel. You can organize them into collections, reorder them, and add states or nested selectors.

New selectors output directly in CSS. A class named card is output as .card, without the .breakdance wrapper used by the legacy selector system.

Create and apply a class

1. Select an element.
2. Open the element’s Settings tab.
3. Open Advanced, then find Classes.
4. Use Select or create a class to find an existing class or enter a new name.

Creating a class here also applies it to the selected element. You can enter class names with or without the leading period: card, or .card.

An element can use more than one class, and the same class can be applied to any number of elements.

Edit a class

Click an applied class under Settings > Advanced > Classes to open it in the Selectors panel.

You can also click the three-dot menu in the builder’s top bar, choose Selectors, and select a class from the site-wide list.

The panel includes controls for layout, spacing, size, position, typography, backgrounds, borders, effects, and custom CSS. Styles set there belong to the selector, so they apply to every element using it.

Understand selector order

When selectors have the same specificity and set the same property at the same breakpoint, their order in the Selectors panel determines which value wins in the CSS cascade.

While you edit a selector applied to the active element, the controls show when a value comes from an earlier selector or breakpoint and when it is overwritten by a later selector. Reorder selectors in the panel when their cascade order needs to change.

States and nested selectors

A selector can store styles for these built-in states:

• &:hover
• &:active
• &:focus
• &:focus-within
• &:focus-visible

Open the selector’s menu and choose the state you want to edit.

The same menu lets you create nested selectors. Use a nested selector when something should be styled in relation to the current selector, such as an image or heading inside a card.

Manage selectors

Click the three-dot menu in the builder’s top bar and choose Selectors to open the site-wide selector list. From there you can:

• Search selectors.
• Create and name collections.
• Reorder selectors and collections.
• Rename, duplicate, delete, lock, or unlock a selector.
• Add states and nested selectors.
• Review selector history.
• Import or export selectors.
• Add a class or a custom selector directly to a collection.

An import can merge with the current selectors or replace them.

Remove or delete a class

Remove a class under Settings > Advanced > Classes when you only want to detach it from the selected element.

Deleting it from the Selectors panel removes the selector from the site’s selector library instead.

Selectors from Breakdance 2.x

Breakdance keeps selectors created before 3.0 in the legacy selector system until you convert them. Nothing is converted automatically. See Migrate Breakdance 2.x Selectors for the conversion workflow.