`font` by itself seems to make `font-style` unchangeable

Question

In the following, when I combine font-size and font-family into font, and then use JS to change the new-style class, the line font-style: italic; line is ignored:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Chapter 9, Example 5</title>
  <style>
    #divAdvert {
      font: 12pt Arial;
    }
    .new-style {
      text-decoration: underline;
      font-style: italic;
    }
  </style>
</head>
<body>
  <div id="divAdvert">
    Here is an advertisement. Why doesn't this italicize?
  </div>
  <br><button onclick="clickMeh();">Click Meh</button>

  <script>
    function clickMeh() {
      var divAdvert = document.getElementById("divAdvert");
      divAdvert.className = "new-style";
    }
  </script>
</body>
</html>

Codepen here.

But when I separate them, the line is italicized as expected:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Chapter 9, Example 5</title>
  <style>
    #divAdvert {
      font-size: 12pt;
      font-family: Arial;
    }
    .new-style {
      text-decoration: underline;
      font-style: italic;
    }
  </style>
</head>
<body>
  <div id="divAdvert">
    Here is an advertisement.
  </div>
  <br><button onclick="clickMeh();">Click Meh</button>

  <script>
    function clickMeh() {
      var divAdvert = document.getElementById("divAdvert");
      divAdvert.className = "new-style";
    }
  </script>
</body>
</html>

Codepen here.

Why???????

UPDATE: Thanks to input from Evgeny and Michael, I managed to get it working simply by adding #divAdvert in front of .new-style (in the CSS) and I think that's the most correct answer. This preserves the ID and recognizes the fact that the new-style class is entirely dependent on the ID. Codepen here.

Michael Coker · Answer 1 · 2017-06-27T18:20:35.910

It's a CSS specificity issue. font on #divAdvert will overwrite all font properties defined by a rule with lower specificity, and a class has lower specificity than an id. You just need to match or use higher specificity for the change.

I would either style #divAdvert with a class as the selector (what I did below) and append the new class instead of overwriting it, or you can use #divAdvert.new-style instead of .new-style in your selector. In general, I try to avoid using ID's to style things though because you run into issues like this.

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Chapter 9, Example 5</title>
  <style>
    .divAdvert {
      font: 12pt Arial;
    }
    .new-style {
      text-decoration: underline;
      font-style: italic;
    }
  </style>
</head>
<body>
  <div id="divAdvert" class="divAdvert">
    Here is an advertisement. Why doesn't this italicize?
  </div>
  <br><button onclick="clickMeh();">Click Meh</button>

  <script>
    function clickMeh() {
      var divAdvert = document.getElementById("divAdvert");
      divAdvert.classList.add('new-style');
    }
  </script>
</body>
</html>

The italicized font is not Arial, I think you want to add new-style to the class list rather than overwrite it? — James, Jun 27 '17 at 18:11

score 1 · Answer 2 · answered Jun 27 '17 at 18:05

1

Because the #ID is higher in the hierarchy than a .class and font by itself contains all its sub properties, so even if you don't write them then they are just taken as defaults.

You can also use font-style: italic !important; in the .class

answered Jun 27 '17 at 18:05

EvgenyKolyakov

3,310
2
21
31

No, don't use `!important`, especially here where it is completely unnecessary. See https://stackoverflow.com/q/5701149/215552. – Heretic Monkey Jun 27 '17 at 18:10
I'm speaking in general... lol... but yes, try to avoid `!important`. – EvgenyKolyakov Jun 27 '17 at 18:11
1

I get that it's important to avoid `!important` in order to keep the code maintainable, but I do love how this neatly solves the problem while illustrating what the original problem was. – globewalldesk Jun 27 '17 at 18:18
Maybe just use: `#divAdvert { font: 12pt Arial; } #divAdvert.new-style { text-decoration: underline; font-style: italic; }` – EvgenyKolyakov Jun 27 '17 at 18:23
Maybe the _real_ moral of the story is to avoid `font` by itself. – globewalldesk Jun 27 '17 at 18:25
1

Exactly, and then you don't need !important :) – EvgenyKolyakov Jun 27 '17 at 18:27

`font` by itself seems to make `font-style` unchangeable

2 Answers2