I want two classes with different names to have the same property in CSS. I don't want to repeat the code.
.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_
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
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;
}
Source: Stackoverflow.com