CSS/Less order of priority for ‘exact’ same class

So I have two div elements on my page. The page-container div (1st div), and … Read more CSS/Less order of priority for ‘exact’ same class

So I have two div elements on my page. The page-container div (1st div), and the element-container div (2nd div). They both share the exact same LESS code but I need to have order of priority to display the correct content. My goal is to try and not duplicate all of the CSS/LESS twice… I know I can obviously have two separate classes in my less file (figure 2) and have the container class under the page-container class and this will give me the output I am looking for. But I will be duplicating all of the code twice which I don’t want to do.. Any ideas how to write the code once like (figure. 3) but have priority of the 2nd class shown in (figure 2.)?

GOAL: have my "container–bgcolor-Black" div (2nd div) get priority over the 1st div "page-container–bgcolor-White"

The desired outcome would have a BLUE border around the span not the current RED border.

You can see my codepen here: https://codepen.io/glapadre/pen/PojpepZ?editors=1100

Figure 1.

<div class="page-container--bgcolor-White"> 
  <div class="container--bgcolor-Black">
    <span>Some Text</span>
  </div>
</div>

Figure 2.

 .page-container {
  &--bgcolor {
    &-Black {
      padding:50px;
      background-color:#000;
      color:#fff;
      
      span {
        border:2px solid blue;
      }
    }
    &-White {
      padding:50px;
      background-color:#fff;
      color:#000;  

      span {
        border:2px solid red;
      }
    }
  }    
}

.container {
  &--bgcolor {
    &-Black {
      padding:50px;
      background-color:#000;
      color:#fff;
      
      span {
        border:2px solid blue;
      }
    }
    &-White {
      padding:50px;
      background-color:#fff;
      color:#000;  

      span {
        border:2px solid red;
      }
    }
  }    
}

Figure 3.

 .page-container, .container {
  &--bgcolor {
    &-Black {
      padding:50px;
      background-color:#000;
      color:#fff;
      
      span {
        border:2px solid blue;
      }
    }
    &-White {
      padding:50px;
      background-color:#fff;
      color:#000;  

      span {
        border:2px solid red;
      }
    }
  }    
}

Source: CSS – Stack Overflow


Categories: NewsTags: ,

Tags: ,


Leave a Reply

Your email address will not be published. Required fields are marked *