unset

unset

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-

Examples

Color

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

Result:

Border

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>

Result:

Specifications

Browser compatibility

See also

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