.<h1>Overriding the color of the box in the mask to yellow</h1>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="mask">
    <div class="box"></div>
  </div>
</div>
.box {
  width: 10rem;
  height: 10rem;
  margin: 1rem;
  background: pink;
  
  // Add specifity to override .box background in .container
  .mask & {
    background: yellow;
  } 
}

// Housekeeping...

h1 {
  text-align: center;  
}

.container {
  text-align: center;
}

.box,
.mask {
  display: inline-block;
}
View Compiled
Rerun