Selectors
Selectors apply shared styles to matching elements. A class such as .project-card can style several cards at once; changing its styles updates every matching element. Local element styling can override these shared styles.
Creating and Editing a Selector
- Open the top bar menu and choose Selectors.
- Choose a collection, enter a selector such as
.project-card, and click Add. - Select the rule, edit its styles, and save. See Selector Properties for the styling controls.
States
Open the selector's menu and choose States, then edit the differences from its base style. hover applies while the pointer is over the element; active applies during activation, such as a mouse press.
Nested Selectors
Choose Create Selector from a parent selector's menu, enter the nested rule, and press Enter. Select it to edit its styles. The & represents the parent selector:
Under .project-card |
Matches |
|---|---|
& .card-title |
Any descendant with class card-title |
& > .card-title |
A direct child with that class |
&.is-open |
The card itself when it also has is-open |
&:hover .card-title |
A descendant title while the card is hovered |
&::after |
The card's after pseudo-element |
The space after & distinguishes descendants from the same element. Rules style existing markup; they do not create elements.
Applying a Selector
To apply a class selector, select an element and open Advanced > Classes in its Settings tab. Select the class or enter its name without . and press Enter, then save.
Managing Selectors
Open the top bar menu and choose Selectors. The panel lists your selectors and collections, with controls for organizing them, importing and exporting, and restoring earlier revisions.
Collections
Click Add new collection to organize selectors, then drag rules into position. Collections do not limit where styles apply. Deleting a collection also deletes its selectors.
Style Order
Selector-list order determines stylesheet order; nested rules follow their parents. Later rules win when priority and specificity are otherwise equal. Reordering an element's class names does not change stylesheet order.
Import and Export
Use the panel menu to import or export JSON. Download in a collection header exports just that collection.
- Merge retains unrelated selectors and overwrites matching parent definitions while keeping their IDs. Existing same-named nested rules remain; new nested rules are added.
- Replace replaces the complete set. Export first if you need a copy.
History
Open History, select a saved revision, and save to retain it. Current returns to the current saved set. Selector history is separate from document history.