0

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

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 strike-throughed. What do these properties mean?

Answer - https://stackoverflow.com/a/3047117/2232902

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.

Is there a way to prevent this behavior?
ie- Stop the overriding of the property.

Note - I don't have control over the selectors.

Community
  • 1
  • 1
rahulroy9202
  • 2,730
  • 3
  • 32
  • 45
  • 1
    if it's on a published website, and it's only ever one or two properties you want changed, you could always double click on the property, and add !important to the end. If it's your own site, just place the rules further down the css file, or ensure it is a more specific selection. **Note:** Placing styles inline, although not exactly 'developer friendly', may also be an option (they have a higher order of presedence) – jbutler483 Dec 05 '14 at 10:51
  • 2
    crossed out properties can also mean they are invalid (in chrome dev tools there also is a yellow triangle with the `!` sign in it) – web-tiki Dec 05 '14 at 10:56

2 Answers2

2

Not really, that's how browsers render pages.

You can stick an important on your CSS:

.example {
   color: red !important;
}

Or you can use Javascript to change the Style of an element after the page has loaded.

Matthew Felgate
  • 166
  • 12
1

You can add !important before the semicolon in your CSS code.

.example-class {
    width: 500px !important;
}

You can read up on it here

jbutler483
  • 24,074
  • 9
  • 92
  • 145
dqiu
  • 470
  • 2
  • 7