By Alligator
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:
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; }
👉 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;
}
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
I always see these values in editor’s auto-suggestion but never understood what they meant and also I never had to use them. But this is enlightening to know that they have a meaningful function. 👏🏻
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.