JSFiddle - React, Tailwind, and code Playground

HTML

<pre>In container 1, none should be selected.</pre>

<div class='container 1'>
  <div class='widget-a'></div>
  <div class='widget-b'></div>
  <div class='widget-button'></div>
  <div class='widget-z'></div>
  <div class='widget-x'></div>
  <div class='widget-button'></div>
  <div class='widget-z'></div>
</div>

<br />

<div class='container 2'>
  <div class='widget-a'></div>
  <div class='widget-b'></div>
  <div class='widget-button'></div>
  <div class='widget-z'></div>
</div>

<br />

CSS

div {
  padding: 10px;
  border: 1px solid gray; 
  background:silver;
  margin-bottom: 5px;
}

.container .widget-button {
   background:green; 
}