Classes and states

Classes

The class field at the top of the panel is what the rule is written against. Add a class and the panel writes .that-class { … }; the element’s other classes are listed beside it, and clicking one switches the panel to editing that class instead.

⌘Enter from anywhere jumps to the class field with the caret in it.

A class is an attribute, not an identity: adding one does not move the element’s existing styles, and removing one does not delete the rule.

States

:hover, :focus and :active are the states the panel edits directly. Selecting a state and changing a value writes .class:hover { … } alongside the base rule.

Other pseudo-classes — :nth-child, :first-of-type, and the rest — are shown with their full selector text and kept exactly as written, because collapsing them into a state would misrepresent them.

Reading where a value comes from

Every field tells you where its value came from:

• Set here — this rule, at this breakpoint, in this state.
• Inherited or carried down — from a wider breakpoint, a less specific selector, or the parent element. Shown differently so you know that changing it here creates an override rather than editing what you are looking at.

The panel also lists every selector in the project that sets a property on this element, in specificity order, so a value you cannot change from here is traceable to the rule that is actually winning.

Pseudo-elements

::before and ::after style a generated box, so they are a separate edit target from the element itself rather than a state of it.