Overview

The Selectors panel manages every CSS class and selector on your site. Open it with the
{} button in the toolbar, or press Ctrl+Shift+G (Cmd+Shift+G on Mac).

Classes in Oxygen are site-wide: whether a class was created from an element's class
field, auto-generated while styling, or added by an AI agent, it appears here — one
place to browse, organize, edit, and clean up all of them.

Classes and custom selectors

The panel holds two kinds of selectors:

• Classes — shown with a leading dot, like .pd-card. These are the classes you
  apply to elements in the
  Element Properties panel.
• Custom selectors — any other CSS selector, like .pd-card:hover .pd-card-title
  or #signup-form input::placeholder. Custom selectors aren't applied to elements;
  they style whatever they match, site-wide. Use them for markup you don't control or
  for one-off rules you want to manage visually.

To create either, use the Add box at the bottom of a collection: type a single class
name (.pd-badge) to create a class, or any other selector to create a custom selector.
Names must be unique — the panel rejects duplicates.

Editing a selector

Click any selector to open it. You get the same style sections as in the Element
Properties panel — Layout, Spacing, Size, Position, Typography, Background, Borders,
Effects, Custom CSS — but here you're editing the selector globally, without needing any
element selected. Changes apply everywhere the selector matches, and are stored when you
click Save in the toolbar.

The ••• button offers Expand all / Collapse all for the sections, and the
arrow in the top-right corner takes you back to the list. The sections themselves are
documented in
Editing a Selector.

States and nested selectors

Every selector chip — here and in the Element Properties panel — has a menu behind the
arrow on its right edge. Its bottom half creates states (&:hover, &:active,
&:focus, &:focus-within, &:focus-visible) and nested selectors of your own, like
&.open or & .card-title. Nested selectors appear indented under their parent in the
list and in the parent's menu, with a dot marking the ones that have styles.

Both are covered in full in
Applying Classes.

Collections

Selectors are grouped into collections — folders for keeping a growing site organized.
Everything starts in Default. Create more with the folder button in the panel header
(or Add new collection at the bottom), then drag selectors between collections.

Hover a collection's header for its actions: rename it inline, Lock all / Unlock
all its selectors, Download it as a JSON file, Delete it, or drag to reorder
collections.

Renaming, duplicating, locking, deleting

From any selector's menu (or double-click a chip to rename directly):

• Rename — renames the class everywhere it's used. Elements track classes by ID, so
  every chip updates automatically. Custom CSS is the one exception: if you typed the
  class name literally inside a Custom CSS section, that text isn't rewritten — update
  it yourself.
• Duplicate — copies the selector with all its styles as name-copy-1.
• Lock / Unlock — a locked selector shows a lock icon and its style editor asks
  for confirmation ("Edit anyway") before letting you change it. Lock the classes of a
  finished design system so you don't restyle them by accident.
• Delete — permanently removes the selector from the site after a confirmation.
  Elements using a deleted class show a "(deleted)" chip you can remove.

Two menu items you may see on chips in the Element Properties panel — Remove and
Set condition — are element-specific and don't appear in the Selectors panel: they
act on one element's use of the class, not on the class itself.

History

The clock button in the header switches the panel to its history view: a list of saved
revisions of your entire selector set, newest first, with date and author. Click a
revision to load it into the builder — the change is live but unsaved until you click
Save, so you can preview freely and back out. Current returns to the latest
saved state.

Import and export

The ••• button in the header exports all selectors to a JSON file or imports a
previously exported one. When importing, choose whether to merge with your existing
selectors (imported selectors overwrite same-named ones, everything else is kept) or
replace the whole set. Use a collection's Download action to export just that
collection.

Search

The search box at the bottom filters the list as you type — matching classes, custom
selectors, and nested selectors across all collections.