[css] How can I apply styles to multiple classes at once?

I want two classes with different names to have the same property in CSS. I don't want to repeat the code.

_x000D_
_x000D_
.abc {_x000D_
   margin-left:20px;_x000D_
}  _x000D_
.xyz {_x000D_
   margin-left:20px;_x000D_
}
_x000D_
<a class="abc">Lorem</a>_x000D_
<a class="xyz">Ipsum</a>
_x000D_
_x000D_
_x000D_

Since both classes are doing the same thing, I should be able to merge it into one. How can I do that?

This question is related to css css-selectors

The answer is


You can have multiple CSS declarations for the same properties by separating them with commas:

.abc, .xyz {
   margin-left: 20px;
}

just seperate the class name with a comma.

.a,.b{
your styles
}

Don’t Repeat Your CSS

 a.abc, a.xyz{
    margin-left:20px;
 }

OR

 a{
    margin-left:20px;
 }

If you use as following, your code can be more effective than you wrote. You should add another feature.

.abc, .xyz {
margin-left:20px;
width: 100px;
height: 100px;
} 

OR

a.abc, a.xyz {
margin-left:20px;
width: 100px;
height: 100px;
} 

OR

a {
margin-left:20px;
width: 100px;
height: 100px;
}