CODEWITHSUNDEEP
htmlcss
Peter
Peter

Reputation: 31

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.

Upvotes: 0

Views: 61

Answers (5)

connexo
connexo

Reputation: 56843

This would be the cleanest way to do it:

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

  1. Only define the properties both have in common in the comma-separated list of selectors.

  2. Only define the individual properties in the specific selectors.

Upvotes: 0

mancestr
mancestr

Reputation: 990

Use commas to combine them:

.loader-inner, .loader-inner2 {
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;
}

After that, simply overwrite the background-color:

.loader-inner2 {
background-color: #4ae2cb;
}

Upvotes: 0

Adrianopolis
Adrianopolis

Reputation: 1292

If this is the only case you foresee I would go ahead and define them together and then create a second one to override the color like so:

.loader-inner, .loader-inner2 {
    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 {
    background-color: #4ae2cb;
}

Upvotes: 0

pol
pol

Reputation: 2701

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

Upvotes: 3

GvM
GvM

Reputation: 1733

.loader-inner, .loader-inner2 {
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 {
 background-color: #4ae2cb;
}

Upvotes: 0

Related Questions