Overview Open Chrome DevTools What's New In DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources
Overview Open Chrome DevTools What's New In DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources

Find overriding CSS declarations

Published on

This guide assumes that you're familiar with inspecting CSS in Chrome DevTools. See Get Started With Viewing And Changing CSS to learn the basics.

Overview #

Suppose that you just added some CSS to your nav and want to make sure the new styles are being applied properly. When you refresh the page the nav looks the same as before. Something is wrong. The first thing to do is inspect the element and make sure that your new CSS is actually being applied to the nav. If you can see your new CSS in the Styles pane, but your new CSS is crossed out, it means that there's some other CSS that is overriding your new CSS. In CSS terminology this concept is called Specificity. Chrome DevTools can help you find the old CSS that is causing your new CSS to not be applied.

A 'max-height: 512px' declaration is crossed out in the Styles pane of Chrome DevTools.

Figure 1. The max-height: 512px declaration is crossed out.

Find overrides in the Computed pane #

  1. From the Elements panel, open the Computed pane.

    The Computed pane.

    Figure 2. The Computed pane.

  2. Scroll through the list of properties and expand the one that you want to investigate further.

    Investigating the 'max-height' property in the Computed pane.

    Figure 3. Investigating the max-height property in the Computed pane.

  3. Click the blue link next to a declaration to jump to open the Sources panel and jump to that declaration's source code. See Make a minified file readable if the code is minified.

    Viewing the 'max-height' declaration's source code in the Sources panel.

    Figure 4. Viewing the max-height declaration's source code in the Sources panel.

Filter properties #

If you want to focus on a specific property, type that property name in the Filter textbox.

Filtering out properties that do not contain 'max' in the Computed pane.

Figure 5. Filtering out properties that do not contain max in the Computed pane.

Show all properties #

If you want to see all properties that are being applied to the element, including user-agent stylesheets, enable the Show All checkbox (next to the Filter textbox).

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.