Peter Peter - 1 month ago 9
CSS Question

How can i efficiently combine two css classes that has the same stats?

I have two different objects/elements/div's in my html, loader-inner and loader-inner 2. They have the exact same stats but the color, which changes with the second object. What is the most efficient way to write this code? I know I shouldn't repeat myself with unnecessary code, so can I somehow combine these two and only change the color of the second element somehow?

.loader-inner {
vertical-align: top;
display: inline-block;
width: 50%;
background-color: #4ae287;
border: 3px solid #f3f3f3;
border-right: 2px;
animation: loader-inner 2s infinite cubic-bezier(.83, .08, .21, .98);
z-index: 1001;
}
.loader-inner2 {
vertical-align: top;
display: inline-block;
width: 50%;
background-color: #4ae2cb;
border: 3px solid #f3f3f3;
animation: loader-inner2 2s infinite cubic-bezier(.83, .08, .21, .98);
z-index: 1001;
}


Thank you.

pol pol
Answer

You use comma and just add the selectors

.loader-inner, .loader-inner2 {
  vertical-align: top;
  display: inline-block;
  width: 50%;
  background-color: #4ae2cb;
  border: 3px solid #f3f3f3;
  animation: loader-inner2 2s infinite cubic-bezier(.83,.08,.21,.98);
  z-index: 1001;
}

Then overwrite the properties by defining a new selector

.loader-inner {
  border-right: 2px;
  background-color: #4ae287;
}
Comments