title: Styling options in "select" element using :has() pseudo class
body: <p>I am trying to style my box bg color according to the selection made in <strong>select</strong> element.
  The challenge is to use :has() pseudo class here.
  I've went through that line of code for a few times now, and it doesn't correspond to what is chosen in the options...
  What am I doing wrong here?</p>
  <p><a href="https://i.stack.imgur.com/tCBWm.png" rel="nofollow noreferrer">Here is an image of what I'm working on</a></p>
  <p>HTML code snippet</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;testing.css&quot;&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=&quot;selections&quot;&gt;
          &lt;select name=&quot;&quot; id=&quot;&quot; class=&quot;options&quot;&gt;
              &lt;option value=&quot;green&quot;&gt;Green colour&lt;/option&gt;
              &lt;option value=&quot;red&quot;&gt;Red colour&lt;/option&gt;
              &lt;option value=&quot;blue&quot;&gt;Blue colour&lt;/option&gt;
              &lt;option value=&quot;yellow&quot;&gt;Yellow colour&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;parentBox&quot;&gt;
          &lt;div class=&quot;box&quot;&gt;box&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>CSS code snippet</p>
  <pre class="lang-css prettyprint-override"><code>.selections {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 30vh;
  }
  
  .options {
      width: 30%;
      height: 30%;
  }
  
  .parentBox {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40vh;
  }
  
  .box {
      box-shadow: 8px 8px 32px;
      width: 50%;
      height: 50%;
  }
  
  .selections:has(select &gt; option[value=&quot;green&quot;])+.parentBox&gt;.box{
      background-color: limegreen;
      box-shadow: -8px -8px 16px darkgreen;
  }
  
  .selections:has(select &gt; option[value=&quot;red&quot;])+.parentBox&gt;.box{
      background-color: firebrick;
      box-shadow: -8px -8px 16px red;
  }
  </code></pre>
  <p>Codepen:
  <a href="https://codepen.io/Rabbit0929/pen/ZEoKYQE" rel="nofollow noreferrer">https://codepen.io/Rabbit0929/pen/ZEoKYQE</a></p>