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

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; 
}
htmlcssweb


Solution 1:[1]

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>

Solution 2:[2]

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

Solution 3:[3]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Code with J
Solution 2 Mohammad Aliahamdi
Solution 3 Arta Gbn

Related Questions