CSS unset and revert

Two more keywords help you undo styles. They are smarter than initial.

unset

unset means:

• if the property is inherited by default, act like inherit;
• otherwise, act like initial.

1
2
3
4
5
6
7
8
9

<style>
  .card { color: #1a5276; border: 2px solid #d94a00; }
  p { color: #d94a00; border: 1px dashed #999; }
  .card .plain { color: unset; border: unset; }
</style>
<div class="card">
  <p>Orange text with a dashed border.</p>
  <p class="plain">Text inherits the card's blue (color is inherited). The border goes to none (border is not).</p>
</div>

Same keyword, two different results, because of the property’s nature.

revert

revert rolls back to the value that the browser’s default stylesheet (or the user’s) would give. Unlike initial, it takes the browser’s HTML knowledge into account.

1
2
3
4
5
6

<style>
  ul { list-style: none; padding: 0; margin: 0; }             /* a site-wide reset */
  .article ul { list-style: revert; padding: revert; margin: revert; }   /* normal lists inside articles */
</style>
<ul><li>A menu item (no bullet)</li></ul>
<div class="article"><ul><li>An article list item (bullet and indent are back)</li></ul></div>

revert restores what the browser itself would do for that tag. For display on a div that is block, while display: initial would give inline.

The all property

all applies a keyword to every property at once: all: unset, all: revert, all: initial. It is a heavy tool:

1

.third-party-widget { all: revert; }   /* start this component from browser defaults */

Use it to isolate a component from surrounding CSS, for example when building an embeddable widget.

Quick guide

1

footer a { color: inherit; text-decoration: none; }