CODEWITHSUNDEEP
htmlcss
Jim
Jim

Reputation: 3665

CSS !important not working

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.

Upvotes: 37

Views: 112684

Answers (2)

diagonalbatman
diagonalbatman

Reputation: 18002

A good subject to read up on is CSS Specificity

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

Upvotes: 28

Sean Vieira
Sean Vieira

Reputation: 159955

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

Upvotes: 36

Related Questions