Edit hover styles and media queries live

Force an element into :hover or :focus and edit those styles directly, or change a rule inside a specific @media block. Each edit lands in the state and breakpoint it belongs to.

Why states and breakpoints are hard to edit

Hover styles vanish the moment you move the mouse toward an editor, and a rule inside @media (max-width: 768px) is easy to lose among the base styles. Screen Ruler's editor treats both as first-class, so you can see and change them without tricks.

Edit hover, focus and active styles

When the selected element has rules for a state, a state picker appears in the element header at the top of the editor. It lists only the states that actually have rules for that element, from :hover, :focus, :focus-visible, :focus-within, :active and :visited.

1. Open the page and start Screen Ruler with Alt + Shift + S (Option + Shift + S on a Mac).
2. Click Edit in the control bar, then click the button, link or field you want to style.
3. Pick a state such as :hover from the state picker in the editor header. The element now shows its hover styles and stays that way while you work.
4. Edit values in Effective Styles or in the state rules themselves.

Edits to a state's winning value are written to the state rule that owns it, so they only apply in that state, the same as they would in your stylesheet. Use Add Rule while a state is forced and the new rule gets the state in its selector, such as a.button:hover.

Edit CSS inside media queries

When the selected element has rules inside an @media block, the editor splits its styles into one section per media context. The base rules come first under Rules, then each matched @media in the same order it appears in the source. Rules inside @supports, @layer, @container and @scope get their own sections too, with the full wrapper chain kept.

• Edits stay in their breakpoint. Change a value inside @media (max-width: 768px) and it only applies at narrow widths, without touching the base styles.
• Add rules to a breakpoint. The + on a media section's header adds a new rule scoped to that media query.
• Inactive sections are greyed out. A media query that does not match the current viewport is dimmed, and the panel updates live as you resize across a breakpoint, so Effective Styles always reflects the width you are looking at.
• Diffs keep their wrappers. The Changes tab keeps each edit wrapped in its @media block, so the copied CSS is valid and ready to paste.

Combine both

States and breakpoints work together. Force :hover, then edit a value inside a media section, and the override applies only on hover at that breakpoint. To see a breakpoint without resizing your window, open Responsive Mode with 9 and pick a width. Rule edits made there apply in every viewport frame at once. To see where a page's breakpoints are, turn on the breakpoint detector with 5.

Limits

• A state only appears in the picker when a rule targets that state on the element itself. Rules like .card:hover .title, where the state belongs to an ancestor, are reached by selecting the ancestor.
• Edits only exist in your browser. Rule edits can be saved per site; inline, class and markup edits reset on reload.
• Entering Responsive Mode reloads the page in a frame. Rule edits carry over, while inline style, markup and class edits are discarded, and Screen Ruler warns you first.

When it is useful

• Polishing interaction states. Tune hover colors, focus rings and pressed states without chasing the mouse.
• Fixing mobile layouts. Adjust the rule that only applies on small screens and see the result at that width straight away.
• Accessibility work. Check and improve :focus-visible styles on real components.

Edit States & Breakpoints is a Studio feature. Every install starts with a free 7-day trial with everything unlocked, no card needed. Only need to look at hover styles, not edit them? Forcing element states works in inspect mode too.

Common questions

How do I edit hover styles without hovering?

Select the element in edit mode and pick :hover from the state picker in the editor header. The element stays in its hover state while you edit, and your changes apply only on hover.

Can I edit a media query for one breakpoint only?

Yes. Each matched @media block gets its own section in the editor. Edits made there stay inside that media query and do not change the base styles.

How is this different from forcing states in DevTools?

DevTools can force states too. Screen Ruler only offers states that have rules for the selected element, groups rules by media context, dims media queries that are not active at the current width, and keeps every state and media edit in a copyable diff with the right wrappers.

Why is a media section greyed out?

Its media query does not match the current viewport, so its rules are not applying right now. You can still edit it, or resize the window or use Responsive Mode to reach that width.