!important isn't working : style inherits from specific selector instead

Question

I stumbed upon this case. I'm not trying to resolve it, I just want to understand the cause.

I have this HTML (I cannot change the HTML in this project) :

<span class="cat-title title">
  <h2>
    <span>
      Partie membre
    </span>
  </h2>
</span>

And this CSS :

.cat-title h2 span {
  font-size: 11px;
}

.cat-title h2 {
  font-size: 50pt !important;
}

What I'm expecting : The text should be 50pt since I used !important, not 11px.

The result I'm getting : The text is 11px.

I thought it was because .cat-title h2 span was more specific, but I don't think it makes sense : !important is meant to rule over all the other CSS rules.

Why is that ? What is the reason behind that ?

Thank you !

See https://stackoverflow.com/questions/5805040/relationship-between-important-and-css-specificity — Niloct, Nov 22 '21 at 00:01
And https://stackoverflow.com/questions/11178673/how-to-override-important?noredirect=1&lq=1 — Niloct, Nov 22 '21 at 00:01

score 2 · Accepted Answer · answered Nov 21 '21 at 23:55

If you inspect the page, you can see that the style font-size: 50pt !important; is being applied to the h2, just like it says in the stylesheet. But the h2 has no text, it only contains a span. The span can inherit text styles from its parent, but these inherited styles are not the highest specificity for the child elements that inherit them, even though you used !important.

score 1 · Answer 2 · edited Nov 22 '21 at 00:16

1

.cat-title h2 span {
  font-size: 11px;

}

this targets the tag inside of h2 whereas,

.cat-title h2 {
  font-size: 50pt !important;
/* if you want span of 50pt uncomment below line*/
  /* font-size: 50pt; */
}

this targets the h2

Given your code, if you modify it as shown then HIII will be of size 50pt:

<h2>
     HIIII
    <span>
      Partie membre
    </span>
  </h2>

edited Nov 22 '21 at 00:16

Dharman

30,962
25
85
135

answered Nov 22 '21 at 00:10

Urjit Desai

23
4

Thank you ! But I was searching for the reason why it was working this way. Raphael Serota answered to the question, but thanks ! – Joshua Fleuri Nov 22 '21 at 00:15

!important isn't working : style inherits from specific selector instead

2 Answers2