TherevertCSS 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 currentstyle origin to the current element. Thus, it resets the property either to user agent set value, to user set value, to its inherited value (if it is inheritable), or to initial value. It can be applied to any CSS property, including the CSS shorthand propertyall.

This keyword removes from the cascade all of the styles that have been overridden until the style being rolled back to is reached.

• If used by a site's own styles (the author origin),revert rolls back the property's cascaded value to the user's custom style, if one exists; otherwise, it rolls the style back to the user agent's default style.
• If used in a user's custom stylesheet, or if the style was applied by the user (the user origin),revert rolls back the cascaded value to the user agent's default style.
• If used within the user agent's default styles, this keyword is functionally equivalent tounset.

Therevert keyword works exactly the same asunset 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).

Revert will not affect rules applied to children of an element you reset (but will remove effects of a parent rule on a child). So if you have acolor: green for all sections andall: revert on a specific section, the color of the section will be black. But if you have a rule to make all paragraphs red, then all paragraphs will still be red in all sections.

Examples

Revert vs. unset

Althoughrevert andunset are similar, they differ for some properties for some elements.

So in the below example, we set customfont-weight, but then try torevert andunset it inline in the HTML document. Therevert keyword will revert the text to bold because that is the default value for headers in most browsers. Theunset keyword will keep the text normal because, as an inherited property, thefont-weight would then inherit its value from the body.

HTML

<h3>  This should have its original font-weight (bold) and color: black</h3><p>Just some text</p><h3>  This will still have font-weight: normal, but color: black</h3><p>Just some text</p>

CSS

h3 {  font-weight: normal;  color: blue;}

Result

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 revertingfont-weight andcolor separately, you could just revert all of them at once - by applying therevert keyword onall.

HTML

<h3>This will have custom styles</h3><p>Just some text</p><h3>This should be reverted to browser/user defaults.</h3><p>Just some text</p>

CSS

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

Result

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.

HTML

<main>  <section>    <h3>This h3 will be dark green</h3>    <p>Text in paragraph will be red.</p>    This stray text will also be dark green.  </section>  <section>    <h3>This h3 will be steelblue</h3>    <p>Text in paragraph will be red.</p>    This stray text will also be steelblue.  </section></main>

CSS

main {  border: 3px solid steelblue;}section {  margin: 0.5rem;  border: 2px dashed darkgreen;}

main {  color: steelblue;}section {  color: darkgreen;}p {  color: red;}section.with-revert {  color: revert;}

Result

Notice how the paragraph is still red even though acolor property for the section was reverted. Also, note that both the header and plain text node aresteelblue. The result of reverting makes it as ifsection { color: darkgreen; } did not exist for the section withcolor: revert applied.

Also, if neither the user agent nor the user override the<h3> or<section> color values, then thesteelblue color is inherited from<main>, as thecolor property is an inherited property.

Specifications

Browser compatibility

See also

• Use theinitial keyword to set a property to its initial value.
• Use theinherit keyword to make an element's property the same as its parent.
• Use therevert-layer keyword to reset a property to the value established in a previous cascade layer.
• Use theunset keyword to set a property to its inherited value if it inherits or to its initial value if not.
• Theall property lets you reset all properties to their initial, inherited, reverted, or unset state at once.