The unset CSS keyword can act as either <a href="https://tympanus.net/codrops/css_reference/initial/">initial</a> or <a href="https://tympanus.net/codrops/css_reference/inherit/">inherit</a> depending on what the property’s default behavior is. If the property is an inherited property, it will be treated as inherit, taking the computed value of its parent element. If not, it will be treated as initial, and the property’s initial value becomes its specified value.
As both the initial and inherit keywords can be used on any CSS property, the unset keyword can be applied to any CSS property, including the CSS shorthand <a href="https://tympanus.net/codrops/css_reference/all/">all</a>.
This keyword acts as a reset, by erasing all declared values on the element applied earlier up the cascade, restoring them to their original behavior and inheritance, as if no styles were applied. This applies to user-agent styles as well. For example, applying all: unset to the body element will remove the default 8px margin set by almost all user-agent style sheets.
Examples
Some commonly used CSS properties that are inherited properties include font-family and color. The background-color property, on the other hand, is not inherited. Say we have the following HTML, with some simple styles applied to the elements.
<body> <div>Hello, world!</div> <div class="unset">Hello, monkey!</div> <div>Hello, watermelon!</div> </body>
body {
background-color: #F5F5F5;
color: #555;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
div {
background-color: #C0C0C0;
color: #006400;
font-family: Georgia, Times, Times New Roman, serif;
}
If we add the property all: unset to the element with the class “unset”, then check its computed CSS property values (from the browser’s Developer Tools), we will see that the inherited properties of color and font-family inherit from the body element, while the background-color gets set back to the initial value of transparent.
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
CSS unset value
A CSS value that's the same as "inherit" if a property is inherited or "initial" if a property is not inherited.
W3C Recommendation
Supported from the following versions:
Desktop
- 41
- 27
- No
- 28
- 9.1
Mobile / Tablet
- 9.3
- 131
- No
- 131
- 132
Notes
The unset value is supported in Microsoft Edge.
