Classes panel
The Classes section appears in the style panel when one or more elements are selected. It lists the classes attached to the selection and provides controls to add, rename, and remove them.
Visibility
The section is rendered whenever at least one element is selected. With no selection, the badge list is empty.
Badges
Each badge represents one occurrence of a class on the selection. A class that appears twice on the same element shows as two badges.
| Badge color | Meaning |
|---|---|
| Default (gray) | The class is present once on every selected element. |
| Amber border | The class appears more than once on at least one selected element. Hovering shows a tooltip indicating the duplicate. |
| Red border | The current edit value is not a valid class name. Shown only while editing. |
Each badge contains the class name and a × remove button.
Controls
| Control | Action |
|---|---|
| + badge | Opens an inline input for adding a new class. |
| Click on a badge name | Opens an inline input for renaming that class. The input pre-selects the existing name. |
| × on a badge | Removes that single occurrence of the class. |
Inline input behavior
The same key bindings apply to both the add and rename inputs.
| Key | Effect |
|---|---|
| Enter, Tab, Space | Commit the change. |
| Escape | Cancel and discard. |
| Blur (click outside) | Commit the change, same as Enter. |
If the value is invalid on commit, the change is silently discarded.
Validation
A class name is valid when it matches /^-?[_a-zA-Z][_a-zA-Z0-9-]*$/:
- Optional leading hyphen.
- First character must be a letter or underscore.
- Subsequent characters may be letters, digits, underscores, or hyphens.
Names that fail validation cause the input border to turn red. Empty input is treated as invalid.
Multi-selection behavior
When multiple elements are selected, the badge list shows the intersection of their class lists, counted by occurrence:
- A class shown once means every selected element has it at least once.
- A class shown twice means every selected element has it at least twice.
- Classes that some elements have but others don’t are hidden.
Add, rename, and remove operations apply to all selected elements as one undo step.
Removal semantics
Removing a single occurrence removes one match from the class attribute string, not all matches. If the same class appears twice on an element, two × clicks are required to remove both.
Undo
Every add, rename, and remove is recorded as one entry in the editor’s undo history.
Related
- How-to: Manage classes on an element
- Explanation: How class editing works with multiple selections