298

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?

rohitmishra
  • 7,949
  • 7
  • 28
  • 34

6 Answers6

343

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).

Jacob Mattison
  • 47,745
  • 8
  • 102
  • 120
  • 20
    On a side note, crossed-out properties can be those "cancelled" by the same-named properties later in the same CSS rule (as required the CSS spec.) – Alexander Pavlov Dec 15 '11 at 23:01
  • 62
    @JacobM : How to know which property is overriding the striked property. – ArunRaj Apr 16 '14 at 10:06
  • 54
    @ArunRaj -- There isn't an easy way to tell which property (or properties) is overriding the crossed-out one. One option is to look in the "computed" styles tab to find the same property type, and then if you expand that you should see the source of the various rules that are trying to apply that property (including the one that actually is active). So if you see that "font-size:11px" is crossed out, look in the computed properties for "font-size", and you should see all of the places that font-size is applied, including the actually active one. Hope this helps. – Jacob Mattison Apr 16 '14 at 14:19
  • 9
    There is now a Filter box at the top of the Styles tab. If you are wondering what has overridden `border-color` then just type `border-color` into the Filter. It will show all the rules containing that property, with the property highlighted in yellow. [This feature](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2015/05/inspector-filter-styles.png) is also available in Firefox. – joeytwiddle Apr 11 '16 at 09:47
  • 5
    Also wanted to add: If a style is struck out but it's already at the top, then you might have a CSS style somewhere with `!important` that's overwriting it. – Dominic K Apr 27 '16 at 21:37
  • Forgive my ignorance - does this mean you can just remove those lines from the CSS file? – ethancrist Mar 29 '18 at 15:00
  • 1
    @ethancrist -- if a style is crossed out, that means it isn't being applied for the specific element that you're looking at. So if you were to remove it, that specific element would not be affected. However, that doesn't necessarily mean that the style in question isn't being applied elsewhere. It's not really possible to test whether a given CSS rule is ever applied anywhere (since the conditions that determine whether it might be applied are determined at runtime). – Jacob Mattison Apr 02 '18 at 12:14
  • 1
    @ArunRaj Using [DOM change breakpoints](https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#dom) is helpful in this situation. – Josh Greifer Feb 21 '20 at 13:56
  • For what it is worth, it was crossed because of invalid value in my case. max-width: 100; is crossed out since it should be max-width: 100px; – Ahmet Dec 26 '20 at 12:53
15

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 **
sanjihan
  • 3,913
  • 6
  • 37
  • 78
14

In addition to the above answer I also want to highlight a case of striked out property which really surprised me.

If you are adding a background image to a div :

<div class = "myBackground">

</div>

You want to scale the image to fit in the dimensions of the div so this would be your normal class definition.

.myBackground {

 height:100px;
 width:100px;
 background: url("/img/bck/myImage.jpg") no-repeat; 
 background-size: contain;

}

but if you interchange the order as :-

.myBackground {
 height:100px;
 width:100px;
 background-size: contain;  //before the background
 background: url("/img/bck/myImage.jpg") no-repeat; 
}

then in chrome you ll see background-size as striked out. I am not sure why this is , but yeah you dont want to mess with it.

Rishul Matta
  • 2,988
  • 4
  • 21
  • 29
  • 1
    Because `background` is a longhand that includes `background-size`, which is `auto` if not defined, which is `contain` if the image has neither an intrinsic width nor an intrinsic height. What's more suprising is that a value that IS applied can be struck-through, eg. `html { font-size: 1rem } p { font-size: 2rem }` or `div { color: red } div > p { color: currentColor }`. – cdoublev Dec 01 '20 at 12:52
13

If you want to apply the style even after getting struck-trough indication, you can use "!important" to enforce the style. It may not be a right solution but solve the problem.

Jishnu V S
  • 7,465
  • 6
  • 24
  • 55
Nanda
  • 131
  • 1
  • 2
  • I had problems toi scale a GoogleMap for mobiles over media. I have a base setting for browsers (without media) followed by various media with smaller sizes, what has not worked (correct stile for mobile showed in GC but with strikethrough). After I have added !important, it works, but I don't understand the "logic" behind it... – FredyWenger Jun 18 '19 at 09:45
3

There are two ways to know which rules are overriding:

  1. Search the property in the Filter box at the top of the Styles tab. It will show all the rules containing that property, with the property highlighted in yellow.

  2. Look in the Computed tab to find the same property type, and then expand that to see the source of the various rules that are trying to apply that property.

Ooker
  • 1,012
  • 2
  • 15
  • 37
-6

There is some cases when you copy and paste the CSS code in somewhere and it breaks the format so Chrome show the yellow warning. You should try to reformat the CSS code again and it should be fine.

hien711
  • 99
  • 2
  • 3
  • 3
    The question did not ask anything about "yellow warnings". This answer should a comment at best. – Simon Oct 19 '17 at 13:06