CODEWITHSUNDEEP
javascriptcss
globewalldesk
globewalldesk

Reputation: 554

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

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.

Upvotes: 0

Views: 52

Answers (2)

Michael Coker
Michael Coker

Reputation: 53664

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>

Upvotes: 3

EvgenyKolyakov
EvgenyKolyakov

Reputation: 3614

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

Upvotes: 1

Related Questions