CSS - unset

Examples

.foo {
  color: blue;
}
.bar {
  color: green;
}

p {
  color: red;
}
.bar p {
  color: unset;
}

<p>This text is red</p>
<div class="foo">
  <p>This text is also red</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value)</p>
</div>

div {
	border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
	border-color: unset;
}

<p>This text has a red border</p>
<div>
  <p>This text has a red border</p>
</div>
<div class="bar">
  <p>This text has has a black border (initial default, not inherited)</p>
</div>

Description  

The unset CSS keyword is the combination of the initial and inherit keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the inherit keyword in the first case and like the initial keyword in the second case.

Browser Compatibility  

See Also  

The CSS-wide property values: initial, inherit, unset, and revert.

Specifications  

License