The revert CSS keyword

❮ CSS References

Meaning

The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element.

It resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist).

It can be applied to any CSS property, including the CSS shorthand property all.

The revert keyword works exactly the same as unset in many cases. The only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).

Note: Revert is just a value. It is still possible to override the revert value using specificity.







Browser Support

The numbers in the table specify the first browser version that fully supports the property.




Status







Revert vs. initial

The revert keyword is different from and should not be confused with the initial keyword, which uses the initial value defined on a per-property basis by the CSS specifications.

In contrast, user-agent stylesheets set default values on the basis of CSS selectors.

For example, the initial value for the display property is inline, whereas a normal user-agent stylesheet sets the default display value of <div>s to block, of <table>s to table, etc.

Example

.initial {
  display: initial;
}

.revert {
  display: revert;
}



Revert vs. unset

Although revert and unset are similar, they differ for some properties for some elements.

In the following example, we set custom font-weight, but then try to revert and unset it inline in the HTML document.

The revert keyword will revert the text to bold because that is the default value for headers in most browsers.

The unset keyword will keep the text normal because, as an inherited property, the font-weight would then inherit its value from the body.

Example

.revert {
  font-weight: revert;
  color: revert;
}

.unset {
  font-weight: unset;
  color: unset;
}



Revert all

Reverting all values is useful in a situation where you've made several style changes and then you want to revert to the browser default values.

So in the above example, instead of reverting font-weight and color separately, you could just revert all of them at once - by applying the revert keyword on all.

Example

h2 {
  font-weight: normal;
  color: blue;
  border-bottom: 1px solid grey;
}

.revert {
  all: revert;
}



Revert on a parent

Reverting effectively removes the value for the element you select with some rule and this happens only for that element.

To illustrate this, we will set a green color on a section and red color on a paragraph.

Example

section {
  color: green;
}

p {
  color: red;
}

section.with-revert {
  color: revert;
}



See also:

❮ CSS References