Style selectors panel

Rename classes, search your styles, preview selectors, and clean up unused classes in one place.

The Style selectors panel lists every class, combo class, and tag you've created or edited on your site. Use it to rename classes, find styles fast, preview what a selector does, and clear out classes you no longer use.

Open the Style selectors panel

The Style selectors panel sits in the left-hand toolbar. To open it, click the three droplets icon or press G on your keyboard.

From here, you can rename classes, preview the styles for a class or HTML tag, search for existing classes and tags, and clean up unused classes. Classes and tags appear in the order you created them.

Understand selector types

Tags: All the HTML tags you've styled appear in pink at the top of the panel. A tag shows up here once you add styles to it. Learn more about HTML tags.

If you've installed a Library that includes tag styles, a Manage library tag styles row appears in this panel. Use it to turn each Library's tag styles Active or Inactive and change their order. Learn more about using shared Library tag styles.

Classes: All classes you've created appear in blue below the tags, in the order you created them. Learn more about classes.

Combo classes: Combo classes appear in blue, nested under each class with a plus icon to their left. Learn more about combo classes.

Nested tags: Nested tags appear in pink, nested under each class with an arrow icon to their left. Learn more about nested tags.

List affected items

Click the list icon to the right of a class or tag to see the elements and components it affects, organized by:

• Elements affected on the current page
• Elements affected on other pages
• Components affected, e.g., the component contains elements using that class or tag

Click an element in the list to select it on the current page. Or, click a page name to jump to that page and see the affected elements there.

Rename classes

To rename a class or combo class:

1. Click the wrench icon
2. Type in the new name
3. Click the checkmark icon (or press Enter) to save the new name, or click the x icon to discard your changes

Search the Style selectors panel

If you use a lot of classes, you can search the panel by class or tag name, as well as the properties and values applied to them. For example:

• Class or tag names — can include button, link, section, etc.
• Properties — can include display, background-color, font-family, etc.
• Values — can include 44px, red, #000000

To search, type your search term (e.g., "link" or "44px") in the search bar. To show all classes and tags again, click the x icon to clear the search.

Preview styles

Preview a class or tag's styles before you apply it to an element. You can also use the preview to decide which unused classes to remove or keep. To preview styles, hover over the class or tag name.

CSS preview only includes styles applied on your site's main breakpoint.

Delete unused classes

Removing a class from an element (by removing it from the Style selector field in the Style panel) doesn't remove the class from your site, because you can reuse a class at any time. You can fully remove a class from the Style selectors panel and your site only when it isn't connected to any element.

Delete an individual unused class

Unused classes don't show a list icon next to their name. To delete one:

1. Click the wrench icon next to the class
2. Click the trash icon to delete the class from your entire site

Delete all unused classes

Deleting all unused classes reduces the weight of your site's code and can improve performance. To delete all unused classes:

1. Click the broom icon in the top right of the Style selectors panel
2. Click Remove to confirm