Glasnhost Glasnhost - 3 days ago 5
CSS Question

why is this css !important overridden?

why the computed font-size is not 16px, as it is clearly declared as the only important style?

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

It's not a bug of the Chrome debugger as it is also rendered as 22px.

enter image description here

I don't add the html as I don't think it's relevant.
It's a huge html page...
(sorry for the editing, this is the correct 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.

Comments