Tracing Overridden CSS Styles in Firefox Developer Tools

This article provides a comprehensive overview of how web developers can use the CSS Rules view and the Computed view in the Firefox Web Browser to track down and debug overridden styles. By understanding how these two panels work together within Firefox Developer Tools, you can quickly identify why specific CSS properties are not applying to an element, how the browser calculates specificity, and which exact stylesheet rule is winning the cascade.

Understanding the CSS Rules View

The CSS Rules view displays every CSS rule that applies to the currently selected HTML element, ordered from highest to lowest specificity. It is the primary workspace for seeing how different stylesheets, inline styles, and inherited properties interact.

To trace overridden styles in the Rules view, look for the following indicators:

  • Strikethrough Text: When a CSS property is overridden by a more specific rule, a rule appearing later in the cascade, or an !important flag, Firefox draws a horizontal line through the inactive property and its value.
  • Rule Ordering: The rules at the very top of the panel (such as inline element styles) take precedence over the rules below them. By scanning from the bottom up, you can watch a property get applied and subsequently crossed out by higher-priority rules above it.
  • Source Links: Next to every rule selector, Firefox provides the exact filename and line number where the rule is defined. This allows you to trace an overriding style directly back to its source code.
  • Interactive Checkboxes: Hovering over any property reveals a checkbox. You can uncheck a winning property to disable it in real-time, which immediately removes the strikethrough from the previously overridden property below it, confirming the conflict.

Understanding the Computed View

While the Rules view shows all the code trying to style an element, the Computed view strips away the noise and displays only the final, calculated values that Firefox actually uses to render the element on the screen. This is especially useful when an element is affected by dozens of complex rules and scrolling through the Rules view becomes overwhelming.

Here is how the Computed view directly traces overridden styles:

  • Property-Specific Cascade Trees: Next to every property in the Computed view is a small arrow. Clicking this arrow expands a list showing every CSS rule that attempted to set that specific property.
  • Clear Hierarchy: Inside this expanded list, the winning value is always listed at the very top, labeled as the "Best Match." Directly beneath it, you will see all the competing rules that were overridden, marked with a strikethrough and ordered by their specificity.
  • Filter Search: A search bar at the top of the Computed view lets you type a single property (like margin or color) to isolate it. You can then expand it to see the exact battle of selectors for that single attribute without looking at irrelevant CSS.
  • Browser Styles: Checking the "Browser Styles" box at the top of the panel reveals default user-agent styles, helping you determine if a Firefox default style is affecting your layout.

Combining Both Views for Fast Debugging

For the most efficient workflow when a style is not rendering as expected, use both views in tandem:

  1. Isolate in the Computed View: Select the HTML element, open the Computed tab, and filter for the problematic CSS property.
  2. Identify the Culprit: Expand the property to see what value is currently winning as the "Best Match" and note the selector and line number causing the override.
  3. Test Fixes in the Rules View: Switch to the Rules tab, locate the overriding selector you just identified, and modify its properties, specificity, or toggle its checkbox to test a solution directly in the browser.