title: Unset/Delete a custom property/CSS variable
body: <p>Take the following example:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.article, .note {
      color: var(--text-color, red);
   }
   .theme {
      --text-color: blue;
   }
   .theme .note {
       --text-color: unset;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
      &lt;p class="article"&gt;Article&lt;/p&gt;
      &lt;p class="note"&gt;Note&lt;/p&gt;
  &lt;/section&gt;
  &lt;section class="theme"&gt;
      &lt;p class="article"&gt;Article&lt;/p&gt;
      &lt;p class="note"&gt;Note&lt;/p&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is it possible to make the second "Note" red again by unsetting the CSS variable?</p>
  
  <p>I know that I could apply the CSS variable only to <code>.article</code> but assume I have a lot of similar elements where I want the theme applied but only a few exemptions. Then maintaining the selector would be rather tedious.</p>
  
  <p>I could change the theme selector to <code>.theme :not(.note)</code> but that does not work on any <code>.note</code> elements nested in other elements.</p>