Html Question posted in
Some basic documentation can be found here.

Html – "revert" does not respect inheritance

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

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

and this CSS:

.container {
  font-weight: normal;
}

.header {
  font-weight: revert;
}

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).

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search