Skip to content
StyleLift

Guide

Copy an element’s :hover and @media CSS

Updated 24 October 2026 · Chrome, Edge, Firefox and Safari

The short answer

DevTools only lists the rules that apply to an element right now. To copy a :hover rule, force the element into that state first: in Chrome’s Styles pane, click :hov and tick :hover. To copy an @media rule, resize the page until the breakpoint applies, and add the @media line back yourself, because “Copy rule” leaves it out. Or let StyleLift collect the states, breakpoints and variables in one click.

The example

The same button as in How to copy CSS from a website:

<a class="btn" href="/signup">Get started</a>
:root {
  --brand: #3b5bfd;
  --space: 1rem;
}
.btn {
  display: inline-block;
  padding: calc(var(--space) * 0.75) var(--space);
  border-radius: 8px;
  background-color: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.btn:hover {
  background-color: #2a44d8;
}
.btn:focus-visible {
  outline: 2px solid #2a44d8;
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .btn {
    display: block;
    text-align: center;
  }
}

Inspect it in DevTools on a wide screen, without hovering it, and the Styles pane shows only the .btn rule. The other three are invisible until you ask for them.

Hover, focus and active rules in DevTools

In Chrome and Edge:

  1. Right-click the element and choose Inspect.
  2. In the Styles pane’s toolbar, click :hov (its tooltip says “Toggle element state”).
  3. Under Force element state, tick :hover. The other checkboxes are :active, :focus, :focus-within, :focus-visible and :target.
  4. The .btn:hover rule now appears at the top of the Styles pane. Right-click it and choose Copy rule.
  5. Untick the state when you’re done, or the element stays hovered.
  • Shortcut: right-click the element’s node in the Elements panel and choose Force state → :hover.
  • Links and form fields have more states, such as :visited, :checked or :disabled, under Force specific element state in the same pane.
  • Focus styles that disappear as soon as you click into DevTools: tick Emulate a focused page at the top of the same pane.
  • Firefox: click :hov in the Rules view (“Toggle pseudo-classes”), or right-click the node and use Change Pseudo-class.
  • Safari: click Pseudo in the Styles sidebar, or Control-click the node and use Forced Pseudo-Classes.

“Copy styles” on the node won’t help here: with :hover forced, it merges the hover declarations into one flat list, so you can no longer tell which ones belong to the hover state.

Breakpoints: finding the @media rules

The Styles pane shows a rule from an @media block only while the query matches, with the query above the selector. So the @media (max-width: 600px) rule appears only in a window narrower than 600px.

  1. Make the page narrow. Click the device icon in the DevTools toolbar (“Toggle device toolbar”, Ctrl Shift M, or ⌘ ⇧ M on a Mac) and set a width under 600.
  2. Find the breakpoints. In the device toolbar’s More options menu, choose Show media queries. Bars appear above the page: blue for max-width queries, orange for min-width, green for both. Click a bar to resize the page to it. The bars only show width queries written with min-width or max-width.
  3. Copy the whole block. “Copy rule” copies .btn { … } without the @media line. To keep it, click the file link beside the rule (such as styles.css:21): the stylesheet opens in the Sources panel at that line, and you can select and copy the whole @media block there.
  • Every media query on the page: open More tools → CSS overview from the DevTools menu, click Capture overview and look under Media queries.
  • Container queries (@container) appear the same way, with a link that selects the container element.
  • Firefox also shows the @media line above each rule and leaves it out of Copy Rule. Its Style Editor lists a stylesheet’s at-rules in a sidebar (right-click → Show At-rules Sidebar).
  • Safari’s Copy Rule (on the small icon left of the selector) keeps the @media around the rule.

CSS variables: var() and their values

A rule you copy may say background-color: var(--brand). Pasted somewhere else, it does nothing until --brand is defined there too. To find the value:

  • Hover --brand in the Styles pane to see its value, and click it to jump to the rule that defines it, often :root.
  • The Computed tab hides custom properties unless you tick Show all; then filter for --brand.
  • In the Console, getComputedStyle($0).getPropertyValue('--brand') returns #3b5bfd for the selected element.

One catch: a variable holds text, not a number. If a site defines --pad: calc(var(--space) * 0.75), reading --pad gives you calc(1rem * 0.75), not 12px. Read the property that uses it (padding-top) to get the final value.

In Firefox, hover a variable for its value or use the arrow beside it to jump to the definition. Safari’s Computed panel has a separate Variables section.

With StyleLift: one click

StyleLift reads the element’s rules from the stylesheets, including the ones that don’t apply right now. Click its toolbar button (or press Alt Shift C), hover the button and click it, in a normal 1280 × 800 window, without forcing anything:

a.btn {
  display: inline-block;
  padding: calc(var(--space) * 0.75) var(--space); /* 12px 16px */
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  background-color: var(--brand); /* #3b5bfd */
}

a.btn:hover {
  background-color: #2a44d8;
}

a.btn:focus-visible {
  outline: #2a44d8 solid 2px;
  outline-offset: 2px;
}

/* Responsive rules (viewport now 1280 × 800) */

@media (max-width: 600px) {
  a.btn {
    display: block;
    text-align: center;
  }
}
  • The states come as their own rules, and the main rule is the element’s normal look, even though your pointer was on it when you clicked.
  • The breakpoints keep their @media lines. The comment above them says these are responsive variants and how big the window was.
  • The variables stay as var(), with each value beside it, so you can see what to define.

Each part is a setting, in the panel’s ⚙ menu and on StyleLift’s options page: States (“Include :hover, :focus and :active states”), Responsive (“Include @media and @container variants”) and Variables (“var() names” or “Resolved values”). With Resolved values, the same click copies:

a.btn {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  background-color: #3b5bfd;
}

a.btn:hover {
  background-color: #2a44d8;
}

a.btn:focus-visible {
  outline: #2a44d8 solid 2px;
  outline-offset: 2px;
}

/* Responsive rules (viewport now 1280 × 800) */

@media (max-width: 600px) {
  a.btn {
    display: block;
    text-align: center;
  }
}

“Copy as” can also be an inline style="" attribute or a React JSX style object. Those can’t hold :hover or @media rules, so StyleLift leaves them out and says so: “Copied style object (:hover, @media need CSS rules: left out)”.

Try it on the live demo, which runs StyleLift’s real CSS engine on a sample site.

Free for 7 days, no card needed. $9 once for a lifetime license. All sales are final.

More guides