title: CSS Conditional Statements with hover
body: <p>This question might be simpler in conditional CSS.</p>
  
  <p>I have five rows with some contents and based on some condition, I'm adding a class named <strong>'previous'</strong> to show different background color.</p>
  
  <p>When I hover the previous class content, I'm getting transparent background which is not good. </p>
  
  <p>I wanted to show the same background color (grey) even if it is hovered.</p>
  
  <p>So, I tried the below code and tried to use <strong>:has</strong> condition in css, If it has previous class, change the hover color to grey. But it didn't worked.</p>
  
  <p>My expectation is to have the same background color even if it is hovered.</p>
  
  <p>Can someone help me on this as I need the solution only from <strong>CSS/SCSS</strong>. not from javascript.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.previous {
    background-color: grey;
  }
  .row:hover {
    background-color: transparent;
    :has(.previous) {
        background-color: grey;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;Some Content 1&lt;/div&gt;
  &lt;div class="row previous"&gt;Some Content 2&lt;/div&gt;
  &lt;div class="row"&gt;Some Content 3&lt;/div&gt;
  &lt;div class="row previous"&gt;Some Content 4&lt;/div&gt;
  &lt;div class="row"&gt;Some Content 5&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>