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?

Bandmaster

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

Cockade

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

@JacobM : How to know which property is overriding the striked property. – Hanna

@Hanna -- 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. – Cockade

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 is also available in Firefox. – Thorson

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. – Shelia

Forgive my ignorance - does this mean you can just remove those lines from the CSS file? – Chatty

@Chatty -- 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). – Cockade

@Hanna Using DOM change breakpoints is helpful in this situation. – Padus

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; – Subfusc

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 **

Biretta

what if the media queries are in a different css file? – Uphemia

@CarlosHernándezGil then it will depend on the order that the stylesheets were loaded. – Olein

but then how come certain styles in @media queries are NOT overridden by later normal styles? It made me think the order did not matter, and that there was something wrong with my own style properties. Until I read you answer. But still, what the hell?! – Crump

Answer 3

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.

Presage

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 }. – Satirical

Answer 4

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.

Narva

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... – Vandalism

Answer 5

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.

Beestings

Answer 6

This happens also if you forget to set the Unit of the value.
For example:
margin-left: -53
instead of
margin-left: -53px;

Grieg

Answer 7

My issue was solved by Jacob Mattison's last point, "or by a later property within the same rule".

Be sure to place your media queries at the bottom of your CSS file.

/*Doesn't work  */
@media (max-width: 480px) {
  body {
    color: red;    
  }
}
body {
  font-family: system-ui;
  color: cornflowerblue;
  margin: 0;  
}
/* works!  */
@media (max-width: 480px) {
  body {
    color: green;    
  }
}

Example:

https://codepen.io/grumbles/pen/XWxWRJJ

Polymath

Answer 8

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.

Pika

The question did not ask anything about "yellow warnings". This answer should a comment at best. – Marquand