Create SCSS to a div inside parent, with a relation to another child div-CodePudding

I'd like to specify a CSS rule (using SASS/SCSS) for a specific div, located as follows,

    <div >
        <div >
          ......
       </div>
       <div >
          .....
       </div>

I need to write a specific CSS rule to "second-child", when the first child has the class "has-this-class".

I tried to use SCSS as this, but it didn't work.

    .parent-div{
       .first-child{
         &.has-this-class   .second-child{
             //Write the styles here
           }
       }
    }

CodePudding user response：

you can try this

   .parent-div{
   .first-child:has(.second-child){
         //Write the styles here
     }
   }

but :has() selector isn't supported by all browsers look at can I use

CodePudding user response：

This code will affect both the first and second child

.parent-div {
  .first-child {
    &.has-this-class,
      .second-child {
      width: 200px;
      height: 200px;
      background-color: crimson;
    }
  }
}