Search code examples
csssafari-web-inspector

Why are multiple entries of 'color' css attribute active in Safari Dev Tools?

Sometimes I see two entries for the CSS 'color' attribute active on a single element, even when one has !important. The one without !important is taking precedence though, as it should (I am trying to force the element to color: white). See screenshot:

enter image description here

Thanks!

UPDATE: added html markup

<div class="x-button x-button-back x-layout-box-item x-stretched" id="quit-button" style="width: auto !important;">
  <span class="x-badge" style="display: none;"></span>
  <span class="x-button-icon x-hidden" id="ext-element-1109"></span>
  <span class="x-button-label" style="" id="ext-element-1110">Quit</span>
</div>

.peacekeepers-edition is set on the first element inside the body, #playview is a distant descendent.

Solution

  • Regardless of the specificity of the rule all proprieties from the CSSOM will appear in the inspector rule view. The fact that the "color:#ccffff" is not crossed/underline is just an inspector bug.

    BTW, you overqualified your selectors: .preacekeepers-edition #playview will have a specificity of 1|1|0|, that is way more that you should have. Adding !important will make things hard to manage later.