Selectors

A rule has to be written against something, and in the style panel that something is a selector you type. The box at the top of the Style tab says so itself:

Add a selector (e.g. .card:hover)

It takes CSS selector text, whatever shape it is in: a class, a class with a state, a descendant selector, a pseudo-element, a nesting path. ⌘Enter from anywhere opens the Style tab with the caret in it, as long as something is selected.

A typed name is read as a class

Type hero_wrap and Stacki writes .hero_wrap — and puts hero_wrap on the element, because a lone class typed into the box is the one case where the box also edits the markup. Read literally as CSS, hero_wrap is a tag selector for an element nobody has, which is not what anyone means by typing it.

The dot is added unless the leading name is a real tag — an HTML or SVG element name, or the selected element’s own tag, which covers custom elements like my-card. So section .title keeps its tag, and hero_wrap:hover becomes .hero_wrap:hover.

Anything more than a lone class — a combinator, a state, a second token, an :is() — is a selector being authored deliberately, so the element is left alone and only the rule is written.

Classes as a list live in the other tab. The Settings tab’s class field is a token editor: each class is a tag, the caret sits between them, and the order you put them in is the order written to the file. See props and settings.

States are typed, not switched

There is no hover, focus or active switcher. The style panel used to have one and does not any more; you reach a state by typing it, which is why the box’s own example is .card:hover.

.card:hover {  /* what you edit after typing `.card:hover` */ }

The same goes for every other pseudo-class. :nth-child(2), :first-of-type, :focus-visible and the rest are selector text like anything else, kept exactly as you wrote them.

The chips

Below the box sits one chip per selector that styles the selected element — its own classes, stateful selectors, and the ancestor selectors reaching it from elsewhere. Click one to make it the edit target; click it again to drop back to showing every winning value read-only.

Chip	Means
Highlighted	The edit target. Its tooltip offers click to deselect
Dashed	no styles yet — typed or added, nothing written against it so far
Dimmed	styled in another query — it has styles, but not in this one
Marked as a category	global, inherited or component, read out in its label

Two checkboxes under the well thin the list out: Hide global selectors and Hide inherited styles, each with its own count.

Delete or Backspace on a chip takes the class or attribute it stands for off the element — and only when that name is written literally in the file. A class coming from class={className} or from a class:list entry is refused with the reason, because deleting the expression that produces it would take more than the one name with it. A tag, a compound selector or an attribute-substring match like [class*="text-"] is part of a selector rather than a thing written on the element, so Delete leaves it alone.

One edge worth knowing: leaving the box with text half-typed abandons it. Enter or picking a suggestion commits a selector; clicking away does not.

Pseudo-elements

::before and ::after are rows in the Navigator, under the element that draws them — a ::before sits before the first child, a ::after after the last. Selecting the row scopes the chips to the selectors styling that generated box. They are an edit target of their own, not a state of the element.

Reading which selector won

Every property label in the panel says where its value came from, by colour:

• Blue: the selector you picked sets it. The label clears the property (Remove property), and reads Overridden by … when a stronger rule wins anyway.
• Orange: something else sets it. The label is a button — Set by .card — click to see all selectors — and opens a list of every selector contributing the property, each one clickable to switch to it.
• Dim: nothing sets it.

A collapsed section carries the same answer as a dot: Set on this selector or Set on another selector. Shift-clicking a section heading opens or closes all of them at once.