The color-coded CSS selector system
Site Designer uses a color-coded system to distinguish between CSS selector types at a glance. Instead of reading raw selector strings, you get an immediate visual signal about where a style originates — and how strongly it applies.
The color system
Each selector type is assigned a distinct color that appears consistently across the Design pane and class list:
| Color | Selector type | Example |
|---|---|---|
| Blue | Class selectors | .card, .btn-primary |
| Orange | ID selectors | #hero, #contact-form |
| Green | Element (tag) selectors | h1, p, section |
| Purple | Pseudo-classes and pseudo-elements | :hover, ::before |
| Gray | Framework-defined classes | .container, .grid-x |
Where colors appear
Colors show up in two key places in the interface:
Selector field in the Design pane — When you click an element on the canvas, the current selector is displayed with its type color. If you switch between a class and an ID in the selector field, the color updates immediately.
Class list panel — Each class listed on an element is tagged with its color so you can scan the full rule chain without expanding each one.
What each color means
Blue (class) — The most common selector type. Classes are reusable across multiple elements. You will create and apply most of your styles here.
Orange (ID) — Applied to a single, unique element on the page. Because IDs carry high specificity, orange is a visual reminder to use them sparingly for styling purposes.
Green (element) — Styles applied directly to an HTML tag. These affect every instance of that tag across the project unless overridden, so green rules act as global defaults.
Purple (pseudo-class) — Indicates a state-specific style such as :hover or :focus. Purple shows you at a glance that these styles are conditional — they only activate in a particular interaction state.
Gray (framework class) — Classes that come from the active framework (Foundation, Bootstrap, or Materialize). You did not write these; they are defined in the framework’s own stylesheet. Gray is a reminder that editing these may conflict with the framework’s rules.
Why it matters: visualizing CSS specificity
CSS specificity determines which rule wins when two selectors target the same element and property. Site Designer’s colors map loosely to this hierarchy:
- Element selectors (green) have the lowest specificity.
- Class and pseudo-class selectors (blue, purple) sit in the middle.
- ID selectors (orange) have higher specificity than classes.
- Inline styles (not represented by a color) override everything.
Reading the selector stack
When multiple rules apply to the same element — a common situation with framework classes, your own classes, and element defaults — Site Designer displays the full stack in the Design pane. Colors let you scan the stack quickly:
- Green at the bottom = the tag-level default
- Gray above it = framework overrides
- Blue above that = your class styles
- Orange at the top = the ID override (highest weight)
Understanding this order helps you predict exactly which value will win and where to make a change to get the result you want.
