0

When you see that a certain css style is overridden in google chrome dev tools. Can you locate the rule that overrides it?

MrKainig
  • 143
  • 1
  • 10

2 Answers2

3
  1. Bring up the context menu for (Right-click or Ctrl-click on) the target element and choose "Inspect".
    enter image description here
    or from Dev Tools, click on "Elements".
    From Dev Tools, click on "Elements"
    Then, click on the target element.
    Click on the target element
  2. At the right, select "Computed".
    At the right, select "Computed"
  3. Then expand the target property.
    Then expand the target property
  4. You can then inspect the CSS source and rule that take final precedence.
    You can then inspect the CSS source and rule that take final precedence.
gfullam
  • 11,531
  • 5
  • 50
  • 64
1

in dev tools, click on "elements", then on the right you see "styles", then click on "computed" and find the style you're looking for and hit the little arrow and it will expand and show the css file and line where the style is set.

I wrestled a bear once.
  • 22,983
  • 19
  • 69
  • 116
  • where does it say "computed"? – MrKainig Jan 21 '16 at 21:04
  • oh there you go: In a narrow state of google chrome dev the computed area is opened automatically because of a different layout... therefore i couldn't find it in the navigation – MrKainig Jan 21 '16 at 21:05