Is there a shorthand css property like "all:" but for unspecified properties?

Question

Let's say I have two different stylesheets that are setting values to unique properties on the div element with class="example".

Stylesheet A:

    .example {
        background-color: #000;
        border-radius: 50%;
        color: #fff;
        width: 25px;
        height: 25px;
        line-height: 25px;
        display: inline-block;
        text-align: center;
    }

Stylesheet B:

    div{
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        vertical-align: baseline;
        background: transparent;
    }

Is there a shorthand property and value similar to all: revert; that I could add to the Stylesheet A to set all undeclared properties to the browser default and essentially overwrite/erase the Stylesheet B? In my mind, it would be something like remaining: revert;.

If there is not such a shorthand property, is there some other trick I could do without explicitly having to list all the properties that haven't been declared in Stylesheet A and applying 'revert'? Bonus points if I could apply this trick recursively to the elements within the div with > and/or * selectors.

Thanks in advance.

Answer 1

There isn't a one-size-fits-all way to do this due to how cascade resolution for the all property works (so the bonus question doesn't have a universal answer, it depends entirely on the project). The CSS cascade does not compartmentalize rules and declarations by the stylesheet they appear in — all author-origin styles are consolidated to a single logical "stylesheet" in the order they appear in, and cascade resolution is performed accordingly. This means equally specific styles in later stylesheets will take precedence, whereas more specific styles in earlier stylesheets will take precedence.

In this case, because .example happens to be more specific than div, placing an all: reset declaration at the top of the .example rule will give you the desired effect (assuming there are no other style declarations elsewhere you would like to preserve, or more specific declarations elsewhere you would like removed as those would continue to apply even if you do this):

.example {
    all: revert;
    background-color: #000;
    border-radius: 50%;
    /* ... */

Everything in .example appearing after the all: revert declaration will be unaffected by it.

In the following code snippet you can compare the results of applying all: revert this way, against an element without the declaration:

.example:where(:first-of-type) {
    all: revert;
}

.example {
    background-color: #000;
    border-radius: 50%;
    color: #fff;
    width: 25px;
    height: 25px;
    line-height: 25px;
    display: inline-block;
    text-align: center;
}

div{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    vertical-align: baseline;
    background: transparent;
}

<p>Inspect each element's styles to see the effects of <code>all: revert</code>
<div class="example">1</div>
<div class="example">2</div>

Or, see the following screenshots of Firefox's Inspector:

Element 1:

Element 2: