Get your own website Result Size: 625 x 565
×
Change Orientation Save Code Change Theme, Dark/Light Go to Spaces
​x
 
<!DOCTYPE html>
<html>
<head>
<style>
@scope (.ex1) {
  :scope {
    background-color: salmon;
    padding: 10px;
  }
  a {
    color: maroon;
  }
  a:hover {
    color: blue;
  }
}
​
@scope (.ex2) {
  :scope {
    background-color: beige;
    padding: 10px;
  }
  a {
    color: green;
  }
}
</style>
</head>
<body>
​
<h1>The @scope Rule</h1>
​
<div class="ex1">
  <h3>CSS</h3>
  <p>CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. <a href="/css/">This tutorial will teach you CSS from basic to advanced</a>.
  </p>
</div>
​
<div class="ex2">
  <h3>CSS</h3>
  <p>CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. <a href="/css/">This tutorial will teach you CSS from basic to advanced</a>.
  </p>
</div>
​
</body>