Find overriding CSS declarations
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.
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.
Figure 1. The
max-height: 512px declaration is crossed out.
Find overrides in the Computed pane #
From the Elements panel, open the Computed pane.
Figure 2. The Computed pane.
Scroll through the list of properties and expand the one that you want to investigate further.
Figure 3. Investigating the
max-heightproperty in the Computed pane.
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.
Figure 4. Viewing the
max-heightdeclaration'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.
Figure 5. Filtering out properties that do not contain
max in the Computed pane.