revert-rule keyword

Chrome 148, Firefox 150, Safari 27 beta. Not Baseline yet (expected late 2026).

Chrome 148Edge 148Safari 27 betaFirefox 150

A cascade keyword that acts as if the current rule did not set the property, letting the next matching rule win. Pairs with `if()` and conditional values to "opt out" of a declaration inside one rule.

Plain variant keeps the base colour via revert-rule.

CSS

.fx-048 {
  color: #2563eb;
  font-family: system-ui;
  font-weight: 600
}
.fx-048-plain {
  color: revert-rule;
  font-weight: revert-rule
}
 /* falls back to UA / earlier rule */

HTML

<p class="fx-048 fx-048-plain">Plain variant keeps the base colour via revert-rule.</p>

Fallback: Unsupported browsers drop the declaration, so the earlier rule wins anyway in this simple case; verify for complex cascades.

Source: developer.chrome.com/release-notes/148 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150

Prompt

Use `revert-rule` inside variant rules to cancel a declaration from the same rule (typically with `if()` or attribute conditions) so the previous cascade value applies, instead of repeating the base value. Supported in Chrome 148+ and Firefox 150+, Safari 27.