How to call multiple classes of CSS in a single class? - html

Question

I have made one button:
<input type="button" class="btn-custom btn btn-info" />
CSS Code
.btn-info {
background-color: #6fb3e0!important;
border-color: #6fb3e0;
}
.btn{padding:5px 10px}
.btn-custom{height:20px;}
I want to combine the style of btn-custom and btn btn-info in single class called .btnCustom.
In short I want the same result as when I try this:
<input type="button" class="btnCustom" />

Answer 1

you can try like this -
.btnCustom, .btn-info {
background-color: #6fb3e0!important;
border-color: #6fb3e0;
}
.btnCustom ,.btn{
padding:5px 10px;
}
.btnCustom ,.btn-custom{
height:20px;
}
<input type="button" class="btnCustom"/>

Answer 2

Hi now try to less css than define those class in one class as like this
Than try to this way
.btnCustom{
.btn();
.btn-info();
height:20px;
}

Answer 3

You need a preprocessor such as less or sass
.class1 {
color: #333;
}
.class2 {
#extend .class1;
border-color: green;
}
Otherwise you have to stick to
<input type="button" class="btn-custom btn btn-info" />

Answer 4

You need to use some preprocessor like less or sass. (You can use the plain CSS too. Just use the Generated CSS code from SASS/SCSS code).
Using sass you can do it like:
HTML Code
<input type="button" class="btnCustom" />
SASS/SCSS Code
.btn-info {
background-color: #6fb3e0!important;
border-color: #6fb3e0;
}
.btn{
padding:5px 10px
}
.btn-custom{
#extend .btn;
#extend .btn-info;
height:20px;
}
Generated CSS Code after compiling the SASS/SCSS Code
.btn-info, .btn-custom {
background-color: #6fb3e0!important;
border-color: #6fb3e0;
}
.btn, .btn-custom{
padding:5px 10px
}
.btn-custom{
height:20px;
}
Of course if you don't want to use any preprocessor, you can use the CSS code generated after compilation directly.

Answer 5

You can use Css like this,
.btnCustom, .btn-info {
background-color: #6fb3e0!important;
border-color: #6fb3e0;
}
.btnCustom ,.btn{
padding:5px 10px;
}
.btnCustom ,.btn-custom{
height:20px;
}
and Html
<input type="button" class="btn-custom btn btn-info" />
Its work in My Website.

Answer 6

You can actually combine all the classes into a single selector like so;
.btn-custom.btn.btn-info {
}
That will only select elements with all those classes.
You can read more about that selector at css-tricks.
Will that do what you want?
There are some good other answers. Using less or sass will likely do what you want.
Be careful with how you use commas in your selectors.