@scope

So targets paragraphs within .my-div.

The :scope bit is the root of the @scope rule and is simply a way to style the .my-div element itself.

@scope (.my-div) {
    :scope {
        border-color: red;
    }
    p {  
        font-size: 0.75em;
    }
}

The @scope rule allows you limit how deep you go.

<div class="my-div">
  <p>lorem ipsum</p>
  <div class="inner">
    <p>more lorem ipsum</p>
  </div>
</div>

Here you can style the first paragraph but exclude the child paragraph of .inner using @scope.

@scope (.my-div) to (.inner) {
    p {  
        font-size: 0.75em;
    }
}

Obviously you could just use .my-div > p to do the same thing. But in more complicated scenarios this is no doubt useful.

There’s actually quite a bit more you can do with @scope but I’m not sure how useful much of it is. A more comprehensive artice give the details.