@scope

@scope (.card) {
  h2 {
    color: pink;
    width: max-content;
  }

  p {
    color: #bada55;
  }

  :scope {
    background: black;
    border: 2px solid #ffc600;
    &:hover {
      background: red;
    }
  }
}

<div class="card">
  <h2>Inside Scope!</h2>
  <p>I am Scoped inside!</p>
  <style>
    @scope {
      /* Select the Scope div */
      :scope {
        background: black;
        color: white;
      }
      /* Select the inside Scope */
      h2 {
        color: red;
      }
    }
  </style>
</div>

Scope Pseudo-Classes Inline

<button>
  I'm a button. Hover me
  <style>
    @scope {
      :scope:hover {
        background: red;
      }
    }
  </style>
</button>

Donut Scope

@scope (.card) to (.callout) {
  h2 {
    color: pink;
    width: max-content;
  }

  p {
    color: #bada55;
  }

  :scope {
    background: black;
    border: 2px solid #ffc600;
    &:hover {
      background: red;
    }
  }
}

Resources

@scope - CSS: Cascading Style Sheets | MDN

Syntax - How does scope CSS work?