JSFiddle - React, Tailwind, and code Playground

by mindplay

HTML

<div class="panel">
  <h2>Panel A</h2>
  <p>Hello world</p>
  <div class="content">
    <h2>Content</h2>
    <p>I said hello</p>
  </div>
</div>

<div scope="panel">
  <h2>Panel A</h2>
  <p>Hello world</p>
  <div scope="content">
    <h2>Content</h2>
    <p>I said hello</p>
  </div>
</div>

CSS

/*
@scope (.panel) to (.content) {
  h2 {
    color: red;
  }
}
*/

:where(.panel) h2:where(:not(.content h2)) {
  color: red;
}

/*
@scope ([scope=panel]) to ([scope]:not([scope=panel])) {
  h2 {
    color: red;
  }
  p {
    font-weight: bold;
  }
}
*/

:where([scope=panel]) h2:where(:not([scope]:not([scope=panel]) h2)) {
  color: red;
}

:where([scope=panel]) p:where(:not([scope]:not([scope=panel]) p)) {
  font-weight: bold;
}