See the CSS rules for any element

Click an element and see the stylesheet rules that style it, grouped by file and in source order, with the declarations that lose the cascade struck through.

What it shows

Computed values tell you what an element looks like. The Source view tells you why. It lists the CSS rules from the page's stylesheets whose selectors match the selected element, written out as the author wrote them:

• One block per stylesheet. Rules are grouped by the file they come from, and the file name sits under each block. Click it to open the stylesheet in a new tab. Rules from <style> tags are labelled inline.
• Source order inside each file. Rules are listed in the order they appear in the file, so the block reads like the original CSS.
• At-rules kept. Rules inside @media blocks appear nested in their media query, so you can see which breakpoint a style belongs to.
• Overridden declarations struck through. When two rules set the same property, the one that loses is shown with a line through it and dimmed.
• State and pseudo-element rules. Rules for :hover, :focus and similar states, and for ::before and ::after, are listed too, so you can see the styles that only show up on interaction.

How to find which CSS rule applies

1. Open the page and start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
2. Click the element you want to inspect.
3. In the side panel's Element tab, find the Code section and change its dropdown from Computed to Source.
4. Look for the property you care about. The declaration without a strike-through is the one in effect, and the rule's selector and file tell you where to change it.

Screen Ruler remembers the view you chose, so the next element you click opens straight in Source. Each file block has its own copy button.

How it works

Screen Ruler walks the page's stylesheets through the browser's CSS Object Model and checks each rule's selector against the selected element. A few details make the result closer to what the browser really does:

• Cascade marking. Only rules that currently apply compete. A :hover rule never strikes out the base style you are looking at, and neither does a rule in a media query that does not match the current viewport. !important declarations win over normal ones.
• Inactive media queries are still listed. Rules for other breakpoints appear in their @media wrapper, so you can see how the element would change at another width, without them affecting the struck-through marks.
• Modern CSS. Rules inside @supports, @layer and @container are included, and nested CSS is read like top-level rules.
• Shadow DOM aware. A rule only counts if it can reach the element, so a document rule for .card is not reported for a .card inside a web component it cannot style. Constructed stylesheets used by components are labelled constructed.
• Forced states. When you use Force Element State to pin :hover or :focus, the rules for that state join the cascade and the strike-throughs update to match.

Stylesheets from other domains

Browsers do not let extensions read stylesheets served from another domain, such as a CDN, through the CSS Object Model. When that happens the Source view says how many cross-origin stylesheets were hidden and offers a Grant access link. Granting the optional permission lets Screen Ruler download those stylesheets itself and fold their rules into the view. Without it, those rules are simply missing, and the note tells you so.

Limits

• Rules on the element only. Styles inherited from a parent, such as a font set on body, are not listed. Select the parent to see its rules, or use the Computed view to see the final value.
• The cascade is approximated. Strike-throughs are based on whether a rule currently applies, its specificity and !important. For edge cases such as cascade layer order, the DevTools Styles pane remains the reference.

When it is useful

• "Why is my style not applying?" Find the rule that overrides yours, along with its selector and file.
• Learning from other sites. See how a site structures its CSS: selectors, breakpoints and states, not just final pixel values.
• Responsive work. See every breakpoint that touches an element in one place. Pair it with the breakpoint detector to see the site's breakpoints as a whole.
• Finding the right rule to edit. On the Studio plan, the live CSS editor lets you change these rules in place.

Browse CSS Rules is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

How is this different from the Styles pane in DevTools?

It answers the same question, with less to wade through. Rules are grouped by stylesheet and listed in source order, media queries are kept as wrappers, and the panel sits next to the page instead of inside DevTools. DevTools is still the more complete reference for cascade edge cases such as layer order.

Why are some rules missing?

The most common reason is a stylesheet on another domain, which the browser hides from extensions. The Source view counts these and offers Grant access so Screen Ruler can load them. Styles inherited from parent elements are also not listed, because they do not match the element itself.

Does it show hover and focus styles?

Yes. Rules for states like :hover and :focus are listed alongside the base rules. They only count as winning declarations when you force that state on the element.

Does it show styles for other screen sizes?

Yes. Rules inside @media queries are shown in their wrapper even when the query does not match the current viewport, so you can see what changes at other widths.