Pseudo-classes and state styling
A pseudo-class targets an element in a specific state — when the user hovers over it, when it has keyboard focus, or when it is the first child of its parent. Site Designer lets you style these states without writing any CSS manually.
What pseudo-classes are
Pseudo-classes are keywords you append to a selector with a colon. They do not target a specific element; they target an element when a condition is true.
Common pseudo-classes you will use regularly:
| Pseudo-class | When it activates |
|---|---|
:hover | Mouse pointer is over the element |
:focus | Element has keyboard or programmatic focus |
:active | Element is being clicked/pressed |
:visited | Link has been visited (applies to <a> only) |
:focus-visible | Element has focus via keyboard (not mouse) |
:first-child | Element is the first child of its parent |
:last-child | Element is the last child of its parent |
:nth-child(n) | Element is the nth child (supports formulas like 2n+1) |
:placeholder | Placeholder text inside an <input> or <textarea> |
The state dropdown in the Design pane
Site Designer exposes pseudo-class editing through the state dropdown at the top of the Design pane. By default it shows Default (no pseudo-class). Click the dropdown to switch to a state context.
While a state is selected, every style change you make is written specifically to that pseudo-class. The selector field updates to show the full selector — for example, .nav-link:hover — so you always know exactly what you are editing.
Styling a hover state
-
Select the element
Click the element on the canvas.
-
Confirm the active class
Check the class field in the Design pane. Make sure the class you want to style is active (highlighted).
-
Switch to :hover
Click the state dropdown and choose :hover.
-
Make your style changes
Change background color, text color, transform, or any other property. These changes only apply when the element is hovered.
-
Return to Default
Click the state dropdown and choose Default to exit the hover context and return to normal editing.
-
Add a transition
In the Effects pane, add a transition on the same class (in Default state) so the change animates smoothly rather than snapping.
:focus-visible for accessible focus styles
Use :focus-visible rather than :focus when styling keyboard focus rings. :focus-visible only activates for keyboard navigation, not mouse clicks — so you get a clear visible indicator for keyboard users without the outline appearing on every mouse interaction.
All interactive elements — buttons, links, form inputs — should have a visible :focus-visible style. The WCAG 2.2 AA standard requires a minimum 3:1 contrast ratio between the focus indicator and the surrounding background.
:placeholder for input text
The :placeholder pseudo-class (technically ::placeholder in modern CSS — Site Designer accepts both) targets the placeholder text in <input> and <textarea> elements. Use it to change the color, font style, or opacity of placeholder text.
Note that placeholder text must have a contrast ratio of at least 4.5:1 against the input background to meet WCAG AA, even though browsers often default to a low-contrast gray.
