Tutorial

Inherit, Initial and Unset Values for CSS Properties

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

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:

<div class="wrapper">
  <p class="one">Snake<p>
  <p class="two">Lizard<p>
  <p class="three">Alligator</p>
  <p>Komodo Dragon</p>
</div>

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;
}

0 Comments

Creative Commons License