CODEWITHSUNDEEP
csscss-variables
Jeanot Zubler
Jeanot Zubler

Reputation: 1384

Inheriting Font Family with css variable not working

I am trying to inherit the global font-family in a variable. However this does not work.

:root {
  --special-font: sans-serif;
}

html {
  font-family: serif;
}

.highlight {
  font-family: var(--special-font);
}

.special {
  --special-font: inherit;
}


/* .special {
  --special-font: serif;
} */


/* .special .highlight {
  font-family: inherit;
} */
<html>

<body>
  <div>
    <p>
      Standard Font: Serif
    </p>
    <p class="highlight">
      Highlight Font: Sans Serif
    </p>
  </div>
  <div class="special">
    <p class="highlight">
      Special Highlight: should be Serif
    </p>
  </div>
</body>

</html>

Both the commented out rules would work. But I would prefer to not repeat myself. Is there something I am missing?

Upvotes: 3

Views: 1008

Answers (1)

Jeanot Zubler
Jeanot Zubler

Reputation: 1384

Figured out what is happening, thanks to a comment, this question and this answer. I am not actually setting the variable to contain the value inherit but rather tell the variable to inherit its value.

In order do make my font-family inherit the documentwide font, I can set the variable to initial. For a variable this is an empty string, thereby setting the font-family property of my paragraph to its default behaviour, which is inherit.

Upvotes: 4

Related Questions