Table of Contents

All CSS properties have 3 basic values in common: <^>inherit<^>, <^>initial<^> and <^>unset<^>. Inherit and initial have been around for a long time, but unset is a new addition. What the values will do can at times get confusing, so here's a breakdown:

  • <^>inherit<^>: Get the property from the parent element.
  • <^>initial<^>: The default value for the property (the browser default).
  • <^>unset<^>: Acts as either inherit or initial. It'll act as inherit if the parent has a value that matches, or else it will act as initial.

Here's an example to make is clear. Here's our markup:

				
					
&lt;div class="wrapper"&gt;

  &lt;p class="one"&gt;Snake&lt;p&gt;

  &lt;p class="two"&gt;Lizard&lt;p&gt;

  &lt;p class="three"&gt;Alligator&lt;/p&gt;

  &lt;p&gt;Komodo Dragon&lt;/p&gt;

&lt;/div&gt;

And here's our CSS:

				
					
.wrapper { color: orange; }



.wrapper p { color: purple; }



p.one { color: inherit; }



p.two { color: initial; }



p.three { color: unset; }
  • Snake is orange, it inherits from the wrapper <^>div<^>.
  • Lizard is black, it takes the initial browser default value.
  • Alligator is orange, in this case <^>unset<^> acts as <^>inherit<^> because there is a parent with a matching value.
  • Komodo Dragon is purple, the only paragraph that takes its value from the <^>.wrapper p<^> selector.

—

👉 A neat trick with <^>unset<^> is when combined with the <^>all<^> shorthand, which automatically affects all properties of a selector. The following unsets every properties of the selected <^>p<^> elements:

				
					
article p {

  all: unset;

}