skip navigation

Initial Unset Revert

Tagged in: all , initial

Some CSS properties are inherited by their children: color, font-size, etc. while others do not, width, height, display etc..

However you can force these non-inherited properties to be inherited.

div {
    height: inherit;
}

the property takes the value from the element’s parent.

If height has not been set on the elements parent then the initial value will be used.

Initial

This removes all styles from an element, including those that the browser sets such as display: block for paragraphs and headings for instance. Probably not very useful most of the time.

Unset

The unset value works differently on inherited and non-inherited CSS properties. When the unset value is set on an inherited property, it resets the property value to its inherited value. The unset value resets a noninherited property to its initial value.

—Logrocket post

An inherited value comes from the parent element.

A non-inherited value does not come from parent element. It’s either set explicitly in the CSS or if not set the initial value is used.

Revert

This reverts an element back to the browser, user agent, styles.

h2:nth-of-type(3) {
    all: revert;
}

Note in the h2 element above not all styles have been reverted though. The colour has been inherited from the <body> tag. Since the body element has not been touched the styles from that are still inherited.

This is true for unset too.

Examples

Below are 3 h2’s with their all property set as described.

h2 {
    all: revert;
}

h2 set to revert

h2 set to unset

h2 set to initial

A test

all: not set

☝