CODEWITHSUNDEEP
safarigoogle-chrome-devtools
Laas
Laas

Reputation: 6058

Safari/Chrome Developer Tools debug CSS overrides

Safari/Chrome Developer Tools indicate that a CSS rule is overridden by something else by striking it through, as shown in the image.

Striked-through CSS rule

Sometimes I find myself in a situation where I can not figure out from the CSS files what causes this rule to be ignored. But surely Safari itself must know as it strikes it through.

Is there a way to know what overrides such a rule?

Upvotes: 8

Views: 3848

Answers (5)

Alexander
Alexander

Reputation: 4527

Go to the Computed tab of Chrome Developer tools. Find wanted property and expand details.

Screenshot

Upvotes: 1

sheplu
sheplu

Reputation: 2975

When you inspect an element, you can show the 'box'. Just bottom of that, you have a 'filter' which should show you every properties being applied to your element.

If you click on a property, it will give you the file and the line number.

enter image description here

Upvotes: 3

jmargolisvt
jmargolisvt

Reputation: 6088

Go to Elements >> Computed and you'll get the stylesheet that defines the rule you're looking for.

enter image description here

Upvotes: 1

alex
alex

Reputation: 490143

Look at the one which isn't striked out, higher up on the list.

Alternatively, view the computed styles. They will be the definitive applied styles.

Upvotes: 9

Amadan
Amadan

Reputation: 198294

Developer Tools will list all rules for an element. Just read through all the CSS rules that apply, and check for a non-struck-through one with the same name.

Upvotes: 1

Related Questions