According to the MDN docs for revert, it respects inheritance. So, in theory, if I have this code:

.container {
  font-weight: normal;
}

.header {
  font-weight: revert;
}

<div class="container">
  <h1 class="header">there</h1>
</div>

According to the MDN docs for revert, it respects inheritance. So, in theory, if I have this code:

.container {
  font-weight: normal;
}

.header {
  font-weight: revert;
}

<div class="container">
  <h1 class="header">there</h1>
</div>

the weight of the text should be normal. In theory, revert should first look to its parent (font-weight is an inherited property). Yet, this does not happen. Why?

This is especially odd, considering the fact that I'm applying "revert" directly to the element (so the theory about browser styles overwriting the element styles don't quite hold in this case).

• html
• css

• 3 Quote: ...Thus, it resets the property either to user agent set value, to user set value, to its inherited value (if it is inheritable), or to initial value. End quote. Usually, user agent set value for <h1> is bold. – Kosh Commented Jan 18 at 20:12

2 Answers 2

revert may respect inheritance, but it does not substitute for inherit:

.container {
  /* font-weight: normal; Font weight on div is already normal in this instance */
}

.header1 {
  font-weight: inherit;
}

.header2 {
  font-weight: revert;
}

<div class="container">
  <h1 class="header1">there</h1>
  <h1 class="header2">here</h1>
</div>

As Kosh commented, usually the user agent sets a font-weight on <h1>.

For .header1, we override the user agent styles by explicitly inheriting font weight.

For .header2, we forget any previous styles for font weight that were applied within the current cascade origin, which in this case is our unlayered author styles. Since we have no existing styles for the element from our author styles this essentially does nothing in this instance.

Even though font-weight is an inherited property (e.g. a div would inherit font weight from .container) - since the element is an h1, the browser's default styles assign a font weight which takes precedence in the cascade over inheritance.

Revert resets the property to the value it would have from browser defaults or user-defined styles.

It does not simply fall back to the nearest inherited value in the cascade.

Use inherit if you want to inherit the parent's value directly.