What do the crossed style properties in Google Chrome devtools mean?

Question

While inspecting an element using Chrome's devtools, in the elements tab, the right-hand side 'Styles' bar shows the corresponding CSS properties. At times, some of these properties are struck-through. What do these properties mean?

Answer 1

When a CSS property shows as struck-through, it means that the crossed-out style was applied, but then overridden by a more specific selector, a more local rule, or by a later property within the same rule.

(Special cases: a style will also be shown as struck-through if a style exists in an matching rule but is commented out, or if you've manually disabled it by unchecking it within the Chrome developer tools. It will also show as crossed out, but with an error icon, if the style has a syntax error.)

For example, if a background color was applied to all divs, but a different background color was applied to divs with a certain id, the first color will show up but will be crossed out, as the second color has replaced it (in the property list for the div with that id).

Answer 2

On a side note. If you are using @media queries (such as @media screen (max-width:500px)) pay particular attention to applying @media query AFTER you are done with normal styles. Because @media query will be crossed out (even though it is more specific) if followed by css that manipulates the same elements. Example:

@media (max-width:750px){ #buy-box {width: 300px;} }  #buy-box{ width:500px; }  ** width will be 500px and 300px will be crossed out in Developer Tools. **  #buy-box{ width:500px; }  @media (max-width:750px){ #buy-box {width: 300px;} }  ** width will be 300px and 500px will be crossed out **