Didn't make the #ChromeDevSummit this year? Catch all the content (and more!) in the Chrome Dev Summit 2019 playlist on our Chrome Developers YouTube Channel.

Find Overriding CSS Declarations In Chrome DevTools

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.

Showing all properties in the Computed pane.
Figure 6. Showing all properties in the Computed pane.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.