Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style>
@scope (.container) to (.news) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}
</style>
</head>
<body>
<h1>Using the @scope rule - A donut scope</h1>
<p>A donut scope only targets elements that are placed between two elements in the ancestor tree.
So, what this will do is, it will only focus on the elements that are placed inside .container, but not inside .news</p>
<div class="container">
  <img src="w3logo.png" alt="W3 logo">
<div class="news">
    <h2>Some header</h2>
��� <img src="w3logo.png" alt="W3 logo">
</div>
</div>
</body>
</html>