CSS selector scoping

Let's assume we have this code:

<section id="block">
  <p>Some Text</p>
  <p class="test">Some Text With Class 'test'</p>
  <p>Some More Text</p>
</section>

<p>Some Text</p>
<p class="test">Some Text With Class 'test'</p>
<p>Some More Text</p>

So I want to style <p> and <p class="test"> inside <section id="block"> only.

---

This CSS can be used to do so:

#id p {
  ...
}

#id .test {
  ...
}

However I think it is a bit distracting in case of long ids such as #my-very-long-id for example.

---

Another way to achieve this is to use <style scoped></style> tags.

But it is not really convenient to have CSS code in HTML and furthermore it is mostly not supported by most browsers (as caniuse.com says).

---

My question: is there a way to declare some kind of selector scoping inside CSS?

It would be cool to have something like this:

@scope(#id) {
  p {
    /* ... */
  }

  .test {
    /* ... */
  }
}