How do I select the the grand-children DOMs with the same class (SaSS)

Question

<li className={styles.option}>
   <div>Hi
      <ul>
      <li className={styles.option}> /*** I want these two li DOMs as 'blue'
         <div>Hi
            <ul>
            <li className={styles.option}>   
               <div>Hi</div>
            </li>
            </ul>
         </div>
         
      </li>*****************************************/
    </div>
    </ul>
</li>

I tried many ways but it didn't work

.option {
  background-color: 'yellow'

  &:has(.option) {
    background-color: 'blue'
  }

}

Answer 1

This would make the first li with the option class blue, and the second one yellow:

.option {
  background-color: blue;

  .option {
    background-color: yellow;
  }
}

Answer 2

If you want to do this without changing the option class on your parent <li> you can use the solution below.

 li:nth-child(2) { background: blue; } li:nth-child(3) { background: blue; }

 <li> <div>Outside <li class="option"> <div>Middle <li class="option"> <div>Inside</div> </li> </div> </li> </div> </li>