CSS !important not working

Question

I have the following code and for some reason the !important qualifier isn't working.

<div style="font-family : calibri; font-size: 20pt !important;">
  <ul>
    <li>
      <span style="font-size: 11px;">
        <span style="font-size: 11px;">
          Honey Glazed Applewood Smoked Spiral Ham 
        </span>
        <span style="font-size: 11px;">
          Served with Dijon Honey Mustard and Turkey Roulade
        </span>
      </span>
    </li>
  </ul>
</div>

The span tags are generated for website formatting. I was adding the div tag to change the output to PDF format instead of writing a seemingly overcomplicated find and replace function. Since this hack is for specific regions of code, I can't change the CSS sheet.

Any thoughts would be appreciated.

This is CSS rather than HTML. I retagged it but hope you could change the title. — Ryan Li, Jan 06 '11 at 16:11
This is a good example of why you shouldn't use in-line styles: they can be quite hard to override when you need to. Ideally the s should have a class which is styled to 11px in a separate CSS. If your
also had a class or ID, it would then be easy to override the spans. — Spudley, Jan 06 '11 at 17:46

Sean Vieira · Accepted Answer · 2011-01-06T16:32:43.843

34

Give the <div> an id and then add this rule to your CSS stylesheet (or in a <style> tag if you don't want to change the style sheet):

#your_div_id span {
    font-family : calibri; font-size: 20pt !important;
}

!important in CSS allows the author to override inline styles (since they have a higher precedence than style sheet styles normally). It doesn't automatically make the style marked !important override everything else.

SEE: The W3C's documentation on CSS Selector Specificity.
Felix's Demo of the markup

edited Jan 06 '11 at 16:32

answered Jan 06 '11 at 16:12

Sean Vieira

155,703
32
311
293

1

That won't work. I mean, you cannot enforce the bigger font size for the span elements without removing the style information on the elements. – Felix Kling Jan 06 '11 at 16:15
@Felix -- good point! I've added the `` to the selector, so now it *should* be specific enough. – Sean Vieira Jan 06 '11 at 16:16
@Sean Vieira: Yes it does and it seems I was too strict ;) – Felix Kling Jan 06 '11 at 16:18
@Felix King -- *Bows* Glad I can be of some help! – Sean Vieira Jan 06 '11 at 16:19
1

I will delete my answer (its 50% wrong ;)) so you should change your text too (and not refer to me). – Felix Kling Jan 06 '11 at 16:21
@Felix - done -- your contribution is now anonymous, as you desire :-) – Sean Vieira Jan 06 '11 at 16:23
Downvoter, care to explain so I can make the answer better? – Sean Vieira Dec 02 '15 at 02:26

score 26 · Answer 2 · edited Jun 29 '15 at 12:41

A good subject to read up on is CSS Specificity

p has a specificity of 1 (1 HTML selector)
div p has a specificity of 2 (2 HTML selectors, 1+1)
.tree has a specificity of 10 (1 class selector)
div p.tree has a specificity of 12 (2 HTML selectors + a class selector, 1+1+10)
#baobab has a specificity of 100 (1 id selector)
body #content .alternative p has a specificity of 112 (HTML selector + id selector + class selector + HTML selector, 1+100+10+1)

score 0 · Answer 3 · answered Jun 21 '23 at 14:27

0

my issue was that I was assigning a class using innerHTML and a class added to innerHTML is ignored. To fix it I referred to this

answered Jun 21 '23 at 14:27

Apurva Thorat

641
5
10

CSS !important not working

3 Answers3

Linked