How to change one property of a class to be unique but have others be the same in CSS-CodePudding

So basically I am trying to make all my div boxes one size but a unique color. I currently have just done it in CSS below. However I know this isn't efficient, calling out each box with a specific class and changing the color. Is there a better way in CSS?

<div class='containera'>
  <div class='box1a'>#c37857</div>
  <div class='box2a'>#eeedbe</div>
  <div class='box3a'>#99b27f</div>
</div>

.containera{
  display: flex;
  height: 250px;
  width: 800px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 1; 
  background-color: #734444;
  border-radius: 35px;
}

.box1a,.box2a,.box3a{
  height: 100px;
  width: 200px;
  margin: -50px 5px 5px 5px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1a{
 background-color: #c37857; 
}

.box2a{
 background-color: #eeedbe; 
}

.box3a{
 background-color: #99b27f; 
}

CodePudding user response：

Create a new class then add that class name onto the element you want.

.containera{
  display: flex;
  height: 250px;
  width: 800px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 1; 
  background-color: #734444;
  border-radius: 35px;
}
.box-size{
  height: 100px;
  width: 200px;
  margin: -50px 5px 5px 5px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1a{
 background-color: #c37857; 
}

.box2a{
 background-color: #eeedbe; 
}

.box3a{
 background-color: #99b27f; 
}

<div class='containera'>
  <div class='box-size box1a'>#c37857</div>
  <div class='box-size box2a'>#eeedbe</div>
  <div class='box-size box3a'>#99b27f</div>
</div>

CodePudding user response：

You can give div a comprehensive style using * and set separate classes for each box with your favorite colors

CodePudding user response：

you can write inline css... you should use !important to make sure that inline css overwrites class

<div class='containera'>
  <div class='box-size box1a' style="background-color:red !important;">#c37857</div>
  <div class='box-size box2a'>#eeedbe</div>
  <div class='box-size box3a'>#99b27f</div>
</div>