Glasnhost Glasnhost - 6 days ago 5
CSS Question

Why is !important overridden?

Why is the computed font-size

22px
rather than
16px
? The only
!important
style specifies
16px
:

styles in chrome debugger

This is happening on Chrome and Firefox, I didn't try other browsers.

This is the tag hierarchy:

<div id="content">
<div class="stec">
<p class="stec-layout-month-daycell-num">31</p>
</div>
</div>

Answer

.stec and #content p don't target the same elements. !important only applies to the elements matched by the selector. .stec is likely an ancestor of #content p... and !important won't force a style to propogate to children.

Consider the following example. You might expect the paragraph text to be red, inherited from its div parent... but it's not:

div {
  color: red !important;
}
p {
  color: blue;
}
<div> <!-- !important is applied here -->
  This text is red.
  <p>Were you expecting this text to be red too?</p> <!-- not here -->
</div>

It's not about specificity either. It's about whether the rules actually target the appropriate element. Consider the following example:

p {
  color: red !important;
}
#test {
  /* this is the more specific selector, yet it's overridden by !important */
  color: blue;
}
<p>red</p>
<p id="test">were you expecting blue on account of the selector specificity?</p>

p and #test both apply directly to the second paragraphy; so, there's an opportunity for !important to override something.. regardless of the selector specificity.