Scoped stylesheet file without iframe

I want to apply some css using a link tag only to the children of a certain element.

I don't want to use an iframe.

I don't know what css will be there, it is dynamically created by users... So I cannot do something like .myclass .theirclass {} because I cannot edit their css.

I want something that works like the deprecated scoped attribute. In the following example the css would only affect the children of the parent of the style tag with the scoped attribute.

<button>blah</button> <!-- outside scope -->
<div class="parent">
    <style>
        button {
            color: blue;
        }
    </style>
    <button>blah</button> <!-- inside scope -->
</div>

So, how could I do something like that, but with a link tag (and not something that is deprecated).

<button>blah</button> <!-- don't want to affect this -->
<div class="parent">
    <link rel="stylesheet" href="styles.css"/>
    <button>blah</button> <!-- do want to affect this -->
</div>